Checkbox

Composant de case à cocher pour sélectionner plusieurs options avec différents styles et support de groupe.

Import

import { Checkbox } from 'asterui'

Exemples

Utilisation de base

Case à cocher simple avec étiquette.

Accept terms and conditions

import { Checkbox } from 'asterui'

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

export default App

Couleurs

Différentes couleurs de case à cocher pour divers contextes.

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

Tailles

Cinq tailles de case à cocher de xs à 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

Désactivée

États de case à cocher désactivée.

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

Indéterminée

État indéterminé pour la fonctionnalité tout cocher.

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

Groupe de cases à cocher

Grouper plusieurs cases à cocher avec état partagé.

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

Groupe avec options

Générer des cases à cocher à partir d'un tableau d'options avec support de désactivation.

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

Direction du groupe

Dispositions de groupe horizontales et verticales.

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

Contrôlée

Case à cocher contrôlée avec gestion d'état externe.

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

Mode échange

Basculer entre deux états visuels avec effets d'animation.

😀

😴

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`

Propriété	Description	Type	Défaut
`checked`	État coché contrôlé	`boolean`	-
`defaultChecked`	État coché par défaut	`boolean`	-
`disabled`	Désactiver la case à cocher	`boolean`	`false`
`indeterminate`	État indéterminé (sélection partielle)	`boolean`	`false`
`size`	Taille de la case à cocher	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`color`	Couleur de la case à cocher	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'success' \| 'warning' \| 'info' \| 'error'`	-
`swap`	Configuration du mode échange	`CheckboxSwapConfig`	-
`value`	Valeur lorsqu’elle est utilisée dans un groupe	`string \| number`	-
`onChange`	Gestionnaire d’événement de changement	`(e: ChangeEvent) => void`	-
`name`	Attribut HTML name pour l’input	`string`	-
`autoFocus`	Focus automatique au montage	`boolean`	`false`
`className`	Classes CSS supplémentaires	`string`	-
`children`	Contenu de l’étiquette (automatiquement enveloppé dans un élément label)	`ReactNode`	-

`Checkbox.Group`

Propriété	Description	Type	Défaut
`value`	Valeurs sélectionnées contrôlées	`(string \| number)[]`	-
`defaultValue`	Valeurs sélectionnées par défaut	`(string \| number)[]`	-
`onChange`	Callback de changement de sélection	`(values: (string \| number)[]) => void`	-
`disabled`	Désactiver toutes les cases à cocher	`boolean`	`false`
`options`	Options de cases à cocher	`(string \| number \| CheckboxOptionType)[]`	-
`direction`	Direction de la disposition	`'horizontal' \| 'vertical'`	`'vertical'`
`name`	Attribut HTML name pour toutes les cases à cocher (pour la soumission de formulaire)	`string`	-
`children`	Éléments de case à cocher manuels	`ReactNode`	-

`CheckboxSwapConfig`

Propriété	Description	Type	Défaut
`on`	Contenu affiché lorsque coché	`ReactNode`	-
`off`	Contenu affiché lorsque décoché	`ReactNode`	-
`effect`	Effet d’animation	`'rotate' \| 'flip'`	-

`CheckboxOptionType`

Propriété	Description	Type	Défaut
`label`	Étiquette de l’option	`ReactNode`	-
`value`	Valeur de l’option	`string \| number`	-
`disabled`	Désactiver cette option	`boolean`	`false`

Accessibilité

Utilise l’input de case à cocher native pour le support du clavier et du lecteur d’écran
Associe correctement les étiquettes aux cases à cocher
L’état indéterminé est communiqué via la propriété native indeterminate
L’état désactivé empêche l’interaction et est communiqué aux technologies d’assistance
Les états de focus sont visibles pour la navigation au clavier