KARAKURIDESIGN SYSTEM

Radio

Radioは、複数の選択肢から一つだけを選択するためのフォームコントロールです。 RadioGroupでグループ化し、排他的選択を提供します。

2
Weights
3
Sizes
Single
Selection
Radix
Base

Playground

Preview
Dvertical
Size
Color
Weight
Items
Direction
Options
<RadioGroup
  defaultValue="option-1"
>
  <RadioGroupItem
    value="option-1"
    label="Option 1"
  />
  <RadioGroupItem
    value="option-2"
    label="Option 2"
  />
  <RadioGroupItem
    value="option-3"
    label="Option 3"
  />
</RadioGroup>

Sizes

sm
サークル14px
ドット6px
フォント12px
Gap6px
クリック24px
default
サークル16px
ドット8px
フォント14px
Gap8px
クリック32px
lg
サークル20px
ドット10px
フォント16px
Gap10px
クリック36px

Features

With Field

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

States

Default
Disabled

API

Component Structure

RadioGroup— Radix RadioGroup
.ItemProps

Props

RadioGroup

valueundefined
string

制御モードでの選択値

defaultValueundefined
string

非制御モードでの初期値

onValueChangeundefined
(value: string) => void

選択変更時のコールバック

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

ラジオボタンのサイズ (14/16/20px)

color"default"
"default" | "primary"

チェック時のボーダーとドットの色

weight"bold"
"thin" | "bold"

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

orientation"vertical"
"vertical" | "horizontal"

アイテムの配置方向

disabledundefined
boolean

無効States

requiredundefined
boolean

必須フィールド

nameundefined
string

フォームのname属性

looptrue
boolean

キーボードナビゲーションのループ

RadioGroupItem

value*
string

このアイテムの値（必須）

labelundefined
string

ラジオボタンのラベルテキスト

disabledundefined
boolean

個別の無効States