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/
• Brukerutløste feil (valideringsmeldinger) #1684 (comment)
• 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

Preview Give feedback

1. Create shared documentation for form components
2. useCheckbox hook for indeterminate, multiple checked and error feat(useRadioGroup + useCheckboxGroup): add hooks #2712
3. useRadio hook for error and same name feat(useRadioGroup + useCheckboxGroup): add hooks #2712
4. Select fix(Select): use field #2709
5. Field.Counter refactor(Field): ♻️ merge CharacterCounter into Field #2717
6. Convert switch to Field-based component fix(Switch): use field for consistent component api #2773
7. Refactor Textfield to use Field #2713
   react +1
   
8. Update Field.Affix* to support prefix/suffix #2715
   css react +2
   
9. Remove ds-reset.css for form elements #2751
   react +1
   
10. POC: Field component #1943
    react 🕵️ investigate +2
    
11. Topp align checkbox and radio #2459
    css 🐛 bug +2
12. Move Input.Affix to Field #2640
    react +1
    
13. Fieldset: compound components #2666
    react +1
    
14. Use Input in Chip #2669
    react +1
    
15. feat(Search): api changes #2708
    +0
    
16. fix(Radio+Checkbox): use input component #2607
    +0
    

[eirikbacker]

This is a React specific issue. I would argue, that we should in general skip the .Root level, and just do for instance:

<Accordion>
  <Accordion.Heading></Accordion.Heading>
  <Accordion.Content></Accordion.Content>
</Accordion>

When the base component is rendering a actual HTML element, as this clean and a very common pattern:
https://www.patterns.dev/react/compound-pattern/

When using .Root (or .Provider), the common pattern is that this is an indication to the consumer that the React element does not render any HTML, but is there more to provide a functional context:
https://kyleshevlin.com/compound-components/
https://medium.com/@win.le/react-compound-component-with-typescript-d7944ac0d1d6

This separation makes it easier to resonate and exemplify about how our design system translates between React and HTML and other frameworks, as the functional useContext is mostly a React pattern.

That said, I think we can maybe flip the question, and ask;

• Binding the label + helptext + input + error message is a somewhat repetitive wiring task. We could provide a optional utility for this, and this could both be exposed as a React component, but also also in time as maybe a custom element <ds-field>. If we want something like this as an end goal, does that change our implementation for React?

Could the interface then be something like:

<Field>
  <Label>Label</Label>
  <Input />
  <Field.Help>Some additional Info</Field.Help>
  <Field.Error>Error Info</Field.Error>
</Field.Root>

...where <Label> and <Input> is not prefixed - aligning with native elements and HTML standard, and indicating that Field is optional just like in pure HTML? Pure HTML-example of the same:

<ds-field>
  <label>Label</label>
  <input />
  <ds-field-help>Some additional Info</ds-field-help>
  <ds-field-error>Error Info</ds-field-error>
</ds-field>

(dropping form from the name as input-like elements does not actually require being placed inside a form).

[mimarz]

We have finished this, further tweaks and adjustments will be done in separate issues