Skip to content
Vy logo
Components

AttachedInputs

A helper component for "combining" two input fields.

Examples

Two input fields.

<AttachedInputs>
  <Input label="Fornavn" />
  <Input label="Etternavn" />
</AttachedInputs>

Example with floating style. 

<AttachedInputs>
  <Input label="Fornavn" variant="floating" />
  <Input label="Etternavn" variant="floating" />
</AttachedInputs>

Three input fields.🤯 With responsive styling

<AttachedInputs orientation={{ xlDown: "vertical", xl: "horizontal" }}>
  <Input label="Fornavn" />
  <Input label="Mellomnavn" />
  <Input label="Etternavn" />
</AttachedInputs>

Select and inputfield

<AttachedInputs>
  <NativeSelect label="Tittel">
    <option>-</option>
    <option>Hr.</option>
    <option>Frk.</option>
    <option>Fru</option>
    <option>Dr.</option>
  </NativeSelect>
  <Input label="Fullt navn" />
</AttachedInputs>

Two input fields stacked vertically

<AttachedInputs orientation="vertical">
  <Input label="Fornavn" />
  <Input label="Etternavn" />
</AttachedInputs>