Checkbox

Stable

Binary selection control with label and variant options.

Installation

npm install @xaui/native

Import

import { Checkbox } from '@xaui/native/checkbox'

Basic Usage

Minimal example showing the component with its default configuration.

import { Checkbox } from '@xaui/native/checkbox'

export function Example() {
  return <Checkbox />
}

Basic

A simple labeled checkbox.

import { Checkbox } from '@xaui/native/checkbox'

export function BasicExample() {
  return <Checkbox label="Accept terms and conditions" />
}

Variants

Filled has a solid background; light keeps a transparent background with a coloured border.

import { Checkbox } from '@xaui/native/checkbox'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Column gap={12}>
      <Checkbox label="Filled (default)" variant="filled" isChecked />
      <Checkbox label="Light" variant="light" isChecked />
    </Column>
  )
}

Sizes

Four sizes from extra-small to large.

import { Checkbox } from '@xaui/native/checkbox'
import { Column } from '@xaui/native/view'

export function SizesExample() {
  return (
    <Column gap={12}>
      <Checkbox label="Extra small" size="xs" isChecked />
      <Checkbox label="Small" size="sm" isChecked />
      <Checkbox label="Medium" size="md" isChecked />
      <Checkbox label="Large" size="lg" isChecked />
    </Column>
  )
}

Controlled

Drive the checked state from React.

import { useState } from 'react'
import { Checkbox } from '@xaui/native/checkbox'

export function ControlledExample() {
  const [checked, setChecked] = useState(false)

  return (
    <Checkbox
      label="Subscribe to newsletter"
      isChecked={checked}
      onValueChange={setChecked}
    />
  )
}

Select All with Indeterminate

Drive a parent checkbox from a list of children.

import { useState } from 'react'
import { Checkbox } from '@xaui/native/checkbox'
import { Column } from '@xaui/native/view'

const items = ['Option A', 'Option B', 'Option C']

export function IndeterminateExample() {
  const [checked, setChecked] = useState<string[]>([])

  const allChecked = checked.length === items.length
  const someChecked = checked.length > 0 && !allChecked

  const toggleAll = () => setChecked(allChecked ? [] : items)
  const toggle = (item: string) =>
    setChecked(prev =>
      prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item]
    )

  return (
    <Column gap={8}>
      <Checkbox
        label="Select all"
        isChecked={allChecked}
        isIndeterminate={someChecked}
        onValueChange={toggleAll}
      />
      {items.map(item => (
        <Checkbox
          key={item}
          label={item}
          isChecked={checked.includes(item)}
          onValueChange={() => toggle(item)}
          style={{ marginLeft: 24 }}
        />
      ))}
    </Column>
  )
}

Label Alignment

Place the label on either side or use justify variants to push them apart.

import { Checkbox } from '@xaui/native/checkbox'
import { Column } from '@xaui/native/view'

export function LabelAlignmentExample() {
  return (
    <Column gap={12}>
      <Checkbox label="Right (default)" labelAlignment="right" isChecked />
      <Checkbox label="Left" labelAlignment="left" isChecked />
      <Checkbox label="Justify right" labelAlignment="justify-right" fullWidth isChecked />
      <Checkbox label="Justify left" labelAlignment="justify-left" fullWidth isChecked />
    </Column>
  )
}

Theme Colors

Apply any design system color.

import { Checkbox } from '@xaui/native/checkbox'
import { Column } from '@xaui/native/view'

export function ThemeColorsExample() {
  return (
    <Column gap={12}>
      <Checkbox label="Primary" themeColor="primary" isChecked />
      <Checkbox label="Secondary" themeColor="secondary" isChecked />
      <Checkbox label="Success" themeColor="success" isChecked />
      <Checkbox label="Danger" themeColor="danger" isChecked />
      <Checkbox label="Warning" themeColor="warning" isChecked />
    </Column>
  )
}