Checkbox Field
Checkbox component integrated with TanStack Form for type-safe boolean field management.
npx shadcn@latest add https://shuip.plvo.dev/r/tsf-checkbox-field.json
Preview
Loading...
Checkboxes are binary inputs for opting in or accepting terms. CheckboxField
combines Radix UI's Checkbox with an inline clickable label, making the entire label area interactive—not just the checkbox itself.
Common patterns include required checkboxes for terms acceptance (validated with !value
check) or grouped checkboxes for multi-select options (using nested field paths like features.notifications
).
Built-in features
- Clickable inline label positioned next to checkbox
- Boolean field type for true/false state
- Required validation for terms acceptance
- Nested paths for grouped checkboxes
Required checkbox
<CheckboxFieldform={form}name='terms'label='I accept the terms and conditions'formProps={{validators: {onChange: ({ value }) =>!value ? 'You must accept the terms' : undefined}}}/>
Examples
Dependent Fields
Loading...
Default
Loading...
Group
Loading...
Props
Name | Type | Description |
---|---|---|
form | ReactFormApi<TFormData> | Form instance from useForm hook |
name | DeepKeys<TFormData> | Type-safe field name (supports nested paths like "preferences.notifications") |
label | string | Clickable label displayed next to the checkbox (required) |
description | string? | Helper text displayed below the checkbox |
formProps | Partial<FieldOptions>? | TanStack Form field options (validators, etc.) |
fieldProps | React.ComponentProps<typeof Field>? | Props passed to the Field wrapper component |
props | React.ComponentProps<typeof Checkbox>? | Props passed to the Checkbox component |