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>
  );
}