メインコンテンツへスキップ

Checkbox チェックボックス

選択肢のグループから複数選択します。単独使用と LhCheckboxGroup との組み合わせをサポートします。

基本的な使い方​

単独とグループ

選択済み：ink

import { useState } from 'react'
import { LhCheckbox, LhCheckboxGroup } from '@lh-ui/react'

export default function Demo() {
  const [checked, setChecked] = useState(false)
  const [group, setGroup] = useState<string[]>(['ink'])

  return (
    <>
      <LhCheckbox checked={checked} onChange={(val) => setChecked(val)}>
        単独のチェックボックス
      </LhCheckbox>

      <LhCheckboxGroup value={group} onChange={(val) => setGroup(val as string[])}>
        <LhCheckbox value="ink">水墨</LhCheckbox>
        <LhCheckbox value="danqing">丹青</LhCheckbox>
        <LhCheckbox value="blank">留白</LhCheckbox>
      </LhCheckboxGroup>
    </>
  )
}

Checkbox Props​

プロパティ説明型使用可能な値デフォルト値
value選択肢の値（Group 内で有効）unknown——
checked制御された選択状態（単独使用時）boolean——
defaultChecked非制御のデフォルト選択boolean—false
label表示テキストstring——
disabled無効boolean—false
indeterminate不確定状態（見た目のみ。値には影響しない）boolean—false
sizeサイズ'large' | 'middle' | 'small'—ConfigProvider に準拠
nameネイティブ name 属性（Group が透過）string——
sxクイックレイアウトプロパティSxProps——

Checkbox イベント​

イベント説明コールバックシグネチャVue 対応
onChange選択状態の変化（2 引数）(checked: boolean, event: ChangeEvent) => void@change

CheckboxGroup Props​

プロパティ説明型デフォルト値
value制御された選択値の配列unknown[]—
defaultValue非制御のデフォルト値unknown[][]
disabledすべての子項目を無効化booleanfalse
size子項目のサイズ'large' | 'middle' | 'small'ConfigProvider に準拠
name子項目に透過するネイティブ namestring—

CheckboxGroup イベント​

イベント説明コールバックシグネチャVue 対応
onChange選択値の配列の変化(value: unknown[]) => void@change
不確定状態

indeterminate は「すべて選択」の中間状態によく使われます。見た目は横線ですが、checked には影響しません。コンポーネントは useEffect 内でネイティブ input.indeterminate に同期します。

スタイル​

import '@lh-ui/react/style/checkbox'