FormField components

[mrosvik]

Some designsystems use generic form classes/components, usually called form-group or form-field for their form components to have consistent placement of label, descriptions and such around an input/textarea/select element.

Notes:

• https://designsystem.dk/kode/komponenter/inputfelter/
• https://design-system.service.gov.uk/components/text-input/
• https://github.com/digdir/designsystemet/discussions/1684#discussioncomment-9339006
• Slack thread

This could be possible if we split up Textfield into multiple sub-components or generic form scaffolding components.

More generic, example from Radix:

  <Form.Root>
    <Form.Field>
      <Form.Label />
      <Form.Control asChild>
        <input className="Input" type="email" required />
      </Form.Control>
      <Form.Message />
      <Form.ValidityState />
    </Form.Field>

    <Form.Message />
    <Form.ValidityState />

    <Form.Submit />
  </Form.Root>

Or more scoped, Example from Ark UI

import { Field } from '@ark-ui/react'

export const Input = () => {
  return (
    <Field.Root>
      <Field.Label>Label</Field.Label>
      <Field.Input />
      <Field.HelperText>Some additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

### Tasks
- [ ] Checkbox
- [ ] Radio
- [ ] Textfield
- [ ] Textarea
- [ ] Select
- [ ] Search
- [ ] Combobox?
- [ ] https://github.com/digdir/designsystemet/issues/1943
- [ ] https://github.com/digdir/designsystemet/issues/2459