Components

FormControl

FormControl lar deg gruppere et skjemaelement med en label, hjelpetekst og feilmelding.

Examples

Et enkelt eksempel

<FormControl>
  <Input label="Navn" />
</FormControl>

Et eksempel med feilmelding

<FormControl isInvalid>
  <Input label="Navn" />
  <FormErrorMessage>Feil navn</FormErrorMessage>
</FormControl>

Et eksempel med hjelpetekst

<FormControl>
  <Input label="Navn" />
  <FormHelperText>Bruk et dekknavn</FormHelperText>
</FormControl>

Et eksempel med både hjelpetekst og feilmelding

() => {
  const [name, setName] = React.useState('');
  return (
    <FormControl isInvalid={name !== "James Bond"}>
      <Input 
        label="Navn" 
        value={name} 
        onChange={e => setName(e.target.value)} 
      />
      <FormErrorMessage>Ikke et dekknavn</FormHelperText>
      <FormHelperText>Bruk et dekknavn</FormHelperText>
    </FormControl>
  );
}

Guidelines

FormControl er en god komponent å ha. Den hjelper deg nemlig med å koble skjemaelementer med tilhørende komponenter, som labels, feilmeldinger og hjelpetekster.

() => {
  const [value, setValue] = React.useState("");
  return (
    <FormControl isInvalid={value !== "Thomas"}>
      <Input 
        label="Favorittlokomotiv"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <FormErrorMessage>
        Det ser ut til at du ikke har skrevet "Thomas".
        Prøv igjen!
      </FormErrorMessage>
      <FormHelperText>
        Tenk deg godt om før du svarer
      </FormHelperText>
    </FormControl>
  );
}

Dette er veldig nyttig fra et universell utformings-perspektiv, da man automatisk legger til alt av påkrevde aria-tags og IDer.

Code

`<FormControl />`

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

Wrapper component for an input field. Contains some kind of input, as well as FormErrorMessage and FormHelperText components

Props

Name	Type	Required?	Description
`isDisabled`	`boolean`
`isInvalid`	`boolean`
`children`	`React.ReactNode`

Fundamentals

Getting started