Checkbox | Zalify UI

Label

React

Usage

import { Checkbox } from '@zalify-ui/react'

<Checkbox.Root>
  <Checkbox.HiddenInput />
  <Checkbox.Control>
    <Checkbox.Indicator />
  </Checkbox.Control>
  <Checkbox.Label />
</Checkbox.Root>

Info

If you prefer a closed component composition, check out the snippet below.

Examples

Variants

Customize the appearance with different visual styles to match your design:

React

Colors

Use the colorPalette prop to change the color of the checkbox:

LabelLabelLabelLabel

React

Sizes

Adjust the size to match surrounding text or interface elements:

LabelLabelLabel

React

States

Pass the disabled or invalid prop to the Checkbox.Root component to change the visual state of the checkbox.

DisabledDisabledReadonlyInvalid

React

Controlled

Use the checked and onCheckedChange props to control the checkbox state.

'use client'
import { useState } from 'react'
import { Checkbox } from '@zalify-ui/react'

export const App = () => {
  const [checked, setChecked] = useState<Checkbox.CheckedState>(false)

  return (
    <Checkbox.Root checked={checked} onCheckedChange={(e) => setChecked(e.checked)}>
      <Checkbox.HiddenInput />
      <Checkbox.Control>
        <Checkbox.Indicator />
      </Checkbox.Control>
      <Checkbox.Label>Label</Checkbox.Label>
    </Checkbox.Root>
  )
}

Label

Here's an example of how to change the label position to the left:

Label

React

Indeterminate

Set the checked prop to indeterminate to show the checkbox in an indeterminate state.

React

Description

Here's an example of how to add some further description to the checkbox:

I agree to the terms and conditions

By clicking this, you agree to our Terms and Privacy Policy.

React

Link

Render an anchor tag within the Checkbox.Label to add a link to the label.

I agree to the terms and conditions

React

Closed Component

Here's how to setup the avatar for a closed component composition.

import { forwardRef } from 'react'
import { Checkbox as StyledCheckbox, VisuallyHidden } from '@zalify-ui/react'

export type { CheckboxCheckedState } from '@ark-ui/react/checkbox'

export interface CheckboxProps extends StyledCheckbox.RootProps {
  inputProps?: StyledCheckbox.HiddenInputProps
}

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
  const { children, inputProps, ...rootProps } = props
  return (
    <StyledCheckbox.Root {...rootProps}>
      <StyledCheckbox.HiddenInput ref={ref} {...inputProps} />
      <StyledCheckbox.Control>
        <StyledCheckbox.Indicator />
      </StyledCheckbox.Control>
      {children && <StyledCheckbox.Label>{children}</StyledCheckbox.Label>}
      {props['aria-label'] && (
        <StyledCheckbox.Label asChild>
          <VisuallyHidden>{props['aria-label']}</VisuallyHidden>
        </StyledCheckbox.Label>
      )}
    </StyledCheckbox.Root>
  )
})

To use the closed component, simply import and use it like this:

<Checkbox>Label</Checkbox>

Props

Root

Prop	Default	Type
`size`	`'md'`	`'sm' \| 'md' \| 'lg'`
`variant`	`'solid'`	`'solid' \| 'surface' \| 'subtle' \| 'outline' \| 'plain'`
`value`	`\on\`	`string` The value of checkbox input. Useful for form submission.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`checked`		`CheckedState` The controlled checked state of the checkbox
`defaultChecked`		`CheckedState` The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox.
`disabled`		`boolean` Whether the checkbox is disabled
`form`		`string` The id of the form that the checkbox belongs to.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; hiddenInput: string; control: string; label: string }>` The ids of the elements in the checkbox. Useful for composition.
`invalid`		`boolean` Whether the checkbox is invalid
`name`		`string` The name of the input field in a checkbox. Useful for form submission.
`onCheckedChange`		`(details: CheckedChangeDetails) => void` The callback invoked when the checked state changes.
`readOnly`		`boolean` Whether the checkbox is read-only
`required`		`boolean` Whether the checkbox is required

Group

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`		`string[]` The initial value of `value` when uncontrolled
`disabled`		`boolean` If `true`, the checkbox group is disabled
`invalid`		`boolean` If `true`, the checkbox group is invalid
`name`		`string` The name of the input fields in the checkbox group (Useful for form submission).
`onValueChange`		`(value: string[]) => void` The callback to call when the value changes
`readOnly`		`boolean` If `true`, the checkbox group is read-only
`value`		`string[]` The controlled value of the checkbox group

GroupProvider

Prop	Default	Type
`value`*		`UseCheckboxGroupContext`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`indeterminate`		`boolean`