Checkbox primitive
Lower-level checkbox anatomy for custom form control layouts.
Use the Checkbox primitive when you need a custom label layout or extra content. For normal
application forms, use Checkbox.
Anatomy
Checkbox is the React Aria field root. CheckboxContent is the clickable label and must contain
CheckboxControl, which centres CheckboxIndicator. Place visible label content beside the control
inside CheckboxContent. Use FieldDescription and FieldError as siblings of CheckboxContent
for the standard supporting and validation semantics.
<Checkbox isInvalid>
<CheckboxContent>
<CheckboxControl>
<CheckboxIndicator />
</CheckboxControl>
Email notifications
</CheckboxContent>
<FieldDescription>Receive updates by email.</FieldDescription>
<FieldError>Choose a notification preference before you continue.</FieldError>
</Checkbox>API
CheckboxProps
CheckboxProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
Prop
Type
CheckboxContentProps
CheckboxContentProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
CheckboxControlProps
CheckboxControlProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.
CheckboxIndicatorProps
CheckboxIndicatorProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.