Checkbox

Demo

Click Me

Radius

Color

Disabled

Required

<Checkbox label="Click Me"/>

Props

id

Type

string

Default Value

Autogenerated random ID

required

Type

boolean

Default Value

false

disabled

Type

boolean

Default Value

false

checked

Type

boolean

Default Value

false

Whether or not the checkbox is checked.

label

Type

string

Default Value

None

The label of the checkbox.

color

Type

string | undefined

Default Value

undefined

The name of a color in the theme. Does not support arbitrary colors.

When set to undefined, the primary color of the theme will be used.

radius

Type

Radius | undefined

Default Value

undefined

The border radius of the checkbox. When set to undefined, the checkbox will have the default border radius defined in the theme.

autoFocus

Type

boolean

Default Value

false

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

style

Type

string | undefined

Default Value

undefined

Custom CSS styles to apply.

Especially useful for positioning styles like margings.