Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

AttachedInputs

A helper component for "combining" two input fields.

GitHub

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>

Guidelines

Sometimes it makes sense to combine multiple input fields into the "same" input field.
You can combine Input, SearchInput, PasswordInput, NativeSelect, and Select.

Code

<AttachedInputs />

import { AttachedInputs } from "@vygruppen/spor-react";

Combines two Input components.

Props

Name
Type
Required?
Description
orientation"horizontal" | "vertical"The direction of the inputs to be attached. Default horizontal