Checkbox

A form component that allows users to select one or more independent options from a list.
For more information on this component configuration, visit Radix UI

Accept terms

Disabled

Use the disabled class to disable the component.

Accept terms

Valid

Use the data-valid attr or the valid class to indicate an valid state.

Accept terms

Name is valid

Invalid

Use the data-invalid attr or the invalid class to indicate an invalid state.

Accept terms

Name is required

Sizes

Use the checkbox-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Accept terms

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtlelink.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

globals.css


:root {
  --ex-checkbox-cursor: default;
 
  --ex-checkbox-gap-x-sm: calc(var(--spacing) * 2);
  --ex-checkbox-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-checkbox-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-checkbox-radius-sm: var(--radius-sm);
  --ex-checkbox-radius-md: var(--radius-sm);
  --ex-checkbox-radius-lg: var(--radius-sm);
 
  --ex-checkbox-size-sm: calc(var(--spacing) * 4);
  --ex-checkbox-size-md: calc(var(--spacing) * 5);
  --ex-checkbox-size-lg: calc(var(--spacing) * 6);
 
  --ex-checkbox-indicator-font-size-sm: var(--text-lg);
  --ex-checkbox-indicator-font-size-md: var(--text-xl);
  --ex-checkbox-indicator-font-size-lg: var(--text-2xl);
 
  --ex-checkbox-label-font-family: var(--font-sans);
  --ex-checkbox-label-font-weight: var(--font-weight-semibold);
 
  --ex-checkbox-label-font-size-sm: var(--text-xs);
  --ex-checkbox-label-font-size-md: var(--text-sm);
  --ex-checkbox-label-font-size-lg: var(--text-base);
}

API

For more information on this component configuration, visit Radix UI

Checkbox

Element	Selector
`Checkbox`	`.ex-checkbox`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Checkbox Control

Element	Selector
`Checkbox`	`.ex-checkbox-control`

Prop	Type	Default
`as`	`ElementType`	`button`
`asChild`	`boolean`	`false`
`checked`	`boolean`	`false`
`defaultChecked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`name`	`string`
`required`	`boolean`	`false`
`value`	`string`
`onCheckedChange`	`function`

Checkbox Indicator

Element	Selector
`Checkbox`	`.ex-checkbox-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`false`

Checkbox Label

Element	Selector
`Checkbox`	`.ex-checkbox-label`

Prop	Type	Default
`as`	`ElementType`	`label`
`asChild`	`boolean`	`false`