Checkbox

[AlineNap]

Omschrijving

Invoerveld voor het kiezen van een optie uit een groep van opties, of om te kiezen tussen "wel" of "niet".

Let op: Dit alleen het input-element, om het een label, description en foutmelding te geven, moet het samengesteld worden met een FormField en FormField* componenten

Links

• Component: https://nldesignsystem.nl/checkbox
• Figma: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=944-1535
• Community component:
  • CSS: https://nl-design-system.github.io/utrecht/storybook-css/index.html?path=/docs/css-checkbox--docs
  • React: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-checkbox--docs
  • Code: https://github.com/nl-design-system/utrecht/blob/main/packages/component-library-react/src/Checkbox.tsx

Checks

Definition of ready

• [x] Code check op community component (door LUX)
• [x] Styling check op community component (door LUX)
• [x] Plan voor missende features of bugs community component beschreven in ticket
• [ ] Component tokens zijn beschikbaar op main
• [x] Ticket doorgenomen met uitvoerder

Definition of done

Component

• [x] Component is beschikbaar in de index
• [x] Design tokens worden gebruikt

Storybook

• [x] Playground story
• [x] States en properties stories
• [x] Korte beschrijving van het component
  • Wat doet het
  • Wat doen (speciale) features
  • Relatie met andere componenten (bijv. Form field label en Form field)

Tests

• [x] Het component rendert
• [x] Aanpassingen en/of uitbreidingen werken (zie ook Testing components)
• [ ] Visual regression test (door LUX)

[AlineNap]

Styling check

• Filled variant is nog niet mogelijk met design tokens op utrecht. Dit mogen we toevoegen op utrecht code. Jullie hebben eerder met Robbert gesproken over hoe dit component verbeterd kan worden. Graag issue maken op utrecht repo.
  • Update: https://github.com/orgs/nl-design-system/projects/60/views/3?filterQuery=&pane=issue&itemId=84217064&issue=nl-design-system%7Cutrecht%7C2578, devs graag aanvullen.
• Doen we tussenoplossing voor Mijn Aansluitingen? En wat is die oplossing dan?