フォームと選択@neumorphism-ui/radio-group

Radio Group

各項目を実際の input[type=radio] としてレンダリングし、React context を通じて name と選択状態を共有します。制御・非制御の値、水平・垂直 layout、disabled、required に対応します。

@neumorphism-ui/radio-group

Registry JSON

プレビュー

コンパクト1 画面により多くの情報を表示します。標準標準の間隔と穏やかな深度を使用します。ゆったりタッチ操作に十分な間隔を確保します。

インストール

npx shadcn@latest add @neumorphism-ui/radio-group

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

npx shadcn@latest add @neumorphism-ui/radio-group @neumorphism-ui/label

Import

import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"

Example

<RadioGroup
  defaultValue="comfortable"
  orientation="horizontal"
  aria-label="表示密度"
>
  <Label className="flex gap-2" htmlFor="density-compact">
    <RadioGroupItem id="density-compact" value="compact" />
    コンパクト
  </Label>
  <Label className="flex gap-2" htmlFor="density-comfortable">
    <RadioGroupItem id="density-comfortable" value="comfortable" />
    ゆったり
  </Label>
</RadioGroup>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`RadioGroup`	`value / defaultValue`	`string`	`—`	制御された選択値、または非制御時の初期値です。
`RadioGroup`	`onValueChange`	`(value: string) => void`	`—`	選択値が変わったときに呼び出されます。
`RadioGroup`	`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	layout の向きと aria-orientation を設定します。
`RadioGroup`	`name`	`string`	`generated id`	すべての項目で共有する native radio name です。
`RadioGroup`	`disabled / required`	`boolean`	`false`	すべての項目に input の制約を設定します。
`RadioGroupItem`	`value`必須	`string`	`—`	項目が選択されたときに group へ渡す値です。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ