Checkbox

Use checkbox's when you need the user to choose between an either/or option. It's built around the Radix UI Checkbox (opens in a new tab) for better accessibility.

Current Status

Built around Radix UI Checkbox primitive
Basic styling using Tailwind CSS
Works as a controlled component when used within the Field component

Future

Add multi-select support
Add animations
Add visual polish
Improve responsive design for all common device sizes
Add darkmode support
Standardize color design token

Examples

TBD

How to use

Install Radix Checkbox primitive

npm install @radix-ui/react-checkbox

Create component

Copy the code from the sandbox above and paste it into a new file (e.g. Checkbox.tsx)

Make it controlled

Wrap with Field component to add control via React Hook Form:

yourform.tsx

<Field
  name="checkbox"
  defaultValue={true}
  >
  <Field.GroupLabel>Group label text here:</Field.GroupLabel>
  <Field.Control>
    <Checkbox>This is the checkbox's label</Checkbox>
  </Field.Control>
</Field>

Setup `defaultValues` and `zodSchema` in `Form`

Details in Form component

Component API

Required Prop	Type	Description
N/A	N/A	N/A

Optional Prop	Type	Description
N/A	N/A	N/A

Calendar Date Pick