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

<CheckboxField
form={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

NameTypeDescription
formReactFormApi<TFormData>Form instance from useForm hook
nameDeepKeys<TFormData>Type-safe field name (supports nested paths like "preferences.notifications")
labelstringClickable label displayed next to the checkbox (required)
descriptionstring?Helper text displayed below the checkbox
formPropsPartial<FieldOptions>?TanStack Form field options (validators, etc.)
fieldPropsReact.ComponentProps<typeof Field>?Props passed to the Field wrapper component
propsReact.ComponentProps<typeof Checkbox>?Props passed to the Checkbox component