KARAKURIDESIGN SYSTEM

Checkbox

Checkboxは、ユーザーがオプションのオン/オフを切り替えるためのフォームコントロールです。 単独で使用するか、複数を並べてグループとして使用します。

3
Sizes
3
Radius
3
States
Radix
Base

Playground

Preview
D
Size
Color
Weight
Radius
Checked
Items
Options
<Checkbox
  label="Email"
/>

Sizes

sm
ボックス14px
アイコン10px
フォント12px
Gap6px
クリック24px
default
ボックス16px
アイコン12px
フォント14px
Gap8px
クリック32px
lg
ボックス20px
アイコン14px
フォント16px
Gap10px
クリック36px

Features

With Field

Fieldコンポーネントと組み合わせることで、disabledStatesを自動的に継承します。

States

Unchecked
Checked
Indeterminate
Disabled
Disabled On

API

Props

checkedundefined
boolean | "indeterminate"

制御モードでのチェックStates

defaultCheckedundefined
boolean

非制御モードでの初期チェックStates

onCheckedChangeundefined
(checked: boolean | "indeterminate") => void

States変更時のコールバック

size"default"
"sm" | "default" | "lg"

チェックボックスのサイズ (14/16/20px)

radius"sm"
"none" | "sm" | "md"

角丸 (none: 0px / sm: 2px / md: 4px)

weight"bold"
"thin" | "bold"

ボーダーの太さ (thin: 1px / bold: 2px)

color"default"
"default" | "primary"

チェック/未確定Statesの塗り色

labelundefined
string

チェックボックスのラベルテキスト

disabledundefined
boolean

無効States

requiredundefined
boolean

必須フィールド

nameundefined
string

フォームのname属性

value"on"
string

フォームのvalue属性