Checkbox

Componente de checkbox para seleccionar múltiples opciones con varios estilos y soporte de grupo.

Importar

import { Checkbox } from 'asterui'

Ejemplos

Uso Básico

Checkbox simple con etiqueta.

Accept terms and conditions

import { Checkbox } from 'asterui'

function App() {
  return (
      <Checkbox>Accept terms and conditions</Checkbox>
    )
}

export default App

Colores

Diferentes colores de checkbox para varios contextos.

import { Checkbox, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Checkbox color="primary" defaultChecked>Primary</Checkbox>
        <Checkbox color="secondary" defaultChecked>Secondary</Checkbox>
        <Checkbox color="accent" defaultChecked>Accent</Checkbox>
        <Checkbox color="success" defaultChecked>Success</Checkbox>
        <Checkbox color="warning" defaultChecked>Warning</Checkbox>
        <Checkbox color="info" defaultChecked>Info</Checkbox>
        <Checkbox color="error" defaultChecked>Error</Checkbox>
      </Space>
    )
}

export default App

Tamaños

Cinco tamaños de checkbox desde xs hasta xl.

import { Checkbox, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center">
        <Checkbox size="xs" defaultChecked>XS</Checkbox>
        <Checkbox size="sm" defaultChecked>SM</Checkbox>
        <Checkbox size="md" defaultChecked>MD</Checkbox>
        <Checkbox size="lg" defaultChecked>LG</Checkbox>
        <Checkbox size="xl" defaultChecked>XL</Checkbox>
      </Space>
    )
}

export default App

Deshabilitado

Estados de checkbox deshabilitado.

DisabledDisabled Checked

import { Checkbox, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md">
        <Checkbox disabled>Disabled</Checkbox>
        <Checkbox disabled defaultChecked>Disabled Checked</Checkbox>
      </Space>
    )
}

export default App

Indeterminado

Estado indeterminado para funcionalidad de seleccionar todo.

Select All

Item 1Item 2Item 3

import { Checkbox, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [items, setItems] = useState([true, false, true])
  const allChecked = items.every(Boolean)
  const someChecked = items.some(Boolean) && !allChecked
  
  const handleSelectAll = () => {
    setItems(allChecked ? [false, false, false] : [true, true, true])
  }
  
  return (
      <Space direction="vertical" size="sm">
        <Checkbox
          checked={allChecked}
          indeterminate={someChecked}
          onChange={handleSelectAll}
          className="font-medium"
        >
          Select All
        </Checkbox>
        <div className="ml-6">
          <Space direction="vertical" size="xs">
            {['Item 1', 'Item 2', 'Item 3'].map((item, i) => (
              <Checkbox
                key={i}
                checked={items[i]}
                onChange={() => {
                  const newItems = [...items]
                  newItems[i] = !newItems[i]
                  setItems(newItems)
                }}
              >
                {item}
              </Checkbox>
            ))}
          </Space>
        </div>
      </Space>
    )
}

export default App

Grupo de Checkbox

Agrupa múltiples checkboxes con estado compartido.

AppleBananaOrangeMango

import { Checkbox, Modal } from 'asterui'

function App() {
  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Orange', value: 'orange' },
    { label: 'Mango', value: 'mango' },
  ]
  
  return (
      <Checkbox.Group
        options={options}
        defaultValue={['apple', 'orange']}
        onChange={(values) => Modal.info({ title: 'Selected', content: values.join(', ') })}
      />
    )
}

export default App

Grupo con Opciones

Genera checkboxes desde array de opciones con soporte de deshabilitado.

ReadWriteDelete

import { Checkbox } from 'asterui'

function App() {
  const options = [
    { label: 'Read', value: 'read' },
    { label: 'Write', value: 'write' },
    { label: 'Delete', value: 'delete', disabled: true },
  ]
  
  return (
      <Checkbox.Group
        options={options}
        defaultValue={['read']}
      />
    )
}

export default App

Dirección del Grupo

Diseños de grupo horizontal y vertical.

import { Checkbox, Space } from 'asterui'

function App() {
  const options = ['Option A', 'Option B', 'Option C']
  
  return (
      <Space direction="vertical" size="lg">
        <div>
          <p className="text-sm font-medium mb-2">Horizontal (default)</p>
          <Checkbox.Group options={options} direction="horizontal" defaultValue={['Option A']} />
        </div>
        <div>
          <p className="text-sm font-medium mb-2">Vertical</p>
          <Checkbox.Group options={options} direction="vertical" defaultValue={['Option B']} />
        </div>
      </Space>
    )
}

export default App

Controlado

Checkbox controlado con gestión de estado externa.

Controlled checkbox

Checked: No

import { Checkbox, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [checked, setChecked] = useState(false)
  
  return (
      <Space direction="vertical" size="sm">
        <Checkbox
          checked={checked}
          onChange={(e) => setChecked(e.target.checked)}
        >
          Controlled checkbox
        </Checkbox>
        <p className="text-sm text-base-content/70">
          Checked: {checked ? 'Yes' : 'No'}
        </p>
      </Space>
    )
}

export default App

Modo Swap

Alterna entre dos estados visuales con efectos de animación.

😀

😴

OFF

import { Checkbox, Space } from 'asterui'
import { SpeakerWaveIcon, SpeakerXMarkIcon } from '@aster-ui/icons/solid'
import { useState } from 'react'

function App() {
  const [volume, setVolume] = useState(true)
  
  return (
      <Space size="lg">
        <Checkbox
          checked={volume}
          onChange={(e) => setVolume(e.target.checked)}
          swap={{
            on: <SpeakerWaveIcon size={32} />,
            off: <SpeakerXMarkIcon size={32} />,
          }}
        />
        <Checkbox
          swap={{
            on: <span className="text-2xl">😀</span>,
            off: <span className="text-2xl">😴</span>,
            effect: 'rotate',
          }}
        />
        <Checkbox
          swap={{
            on: <span className="text-xl font-bold text-success">ON</span>,
            off: <span className="text-xl font-bold text-error">OFF</span>,
            effect: 'flip',
          }}
        />
      </Space>
    )
}

export default App

API

`Checkbox`

Propiedad	Descripción	Tipo	Predeterminado
`checked`	Estado marcado controlado	`boolean`	-
`defaultChecked`	Estado marcado predeterminado	`boolean`	-
`disabled`	Deshabilitar el checkbox	`boolean`	`false`
`indeterminate`	Estado indeterminado (selección parcial)	`boolean`	`false`
`size`	Tamaño del checkbox	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`color`	Color del checkbox	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'success' \| 'warning' \| 'info' \| 'error'`	-
`swap`	Configuración del modo swap	`CheckboxSwapConfig`	-
`value`	Valor cuando se usa en un grupo	`string \| number`	-
`onChange`	Manejador de evento de cambio	`(e: ChangeEvent) => void`	-
`name`	Atributo name HTML para el input	`string`	-
`autoFocus`	Foco automático al montar	`boolean`	`false`
`className`	Clases CSS adicionales	`string`	-
`children`	Contenido de etiqueta (automáticamente envuelto en elemento label)	`ReactNode`	-

`Checkbox.Group`

Propiedad	Descripción	Tipo	Predeterminado
`value`	Valores seleccionados controlados	`(string \| number)[]`	-
`defaultValue`	Valores seleccionados predeterminados	`(string \| number)[]`	-
`onChange`	Callback de cambio de selección	`(values: (string \| number)[]) => void`	-
`disabled`	Deshabilitar todos los checkboxes	`boolean`	`false`
`options`	Opciones de checkbox	`(string \| number \| CheckboxOptionType)[]`	-
`direction`	Dirección de diseño	`'horizontal' \| 'vertical'`	`'vertical'`
`name`	Atributo name HTML para todos los checkboxes (para envío de formulario)	`string`	-
`children`	Elementos de checkbox manuales	`ReactNode`	-

`CheckboxSwapConfig`

Propiedad	Descripción	Tipo	Predeterminado
`on`	Contenido mostrado cuando está marcado	`ReactNode`	-
`off`	Contenido mostrado cuando está desmarcado	`ReactNode`	-
`effect`	Efecto de animación	`'rotate' \| 'flip'`	-

`CheckboxOptionType`

Propiedad	Descripción	Tipo	Predeterminado
`label`	Etiqueta de opción	`ReactNode`	-
`value`	Valor de opción	`string \| number`	-
`disabled`	Deshabilitar esta opción	`boolean`	`false`

Accesibilidad

Usa input de checkbox nativo para soporte de teclado y lector de pantalla
Asocia correctamente las etiquetas con los checkboxes
El estado indeterminado se comunica mediante la propiedad nativa indeterminate
El estado deshabilitado previene la interacción y se comunica a tecnologías de asistencia
Los estados de foco son visibles para navegación por teclado