Stats
Actions
Tags
Radio button component from SmartHR UI for single selection from a short list (≤5 items). Includes accessibility rules and usage guidelines.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-radio-buttonThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
input[type='radio']要素の代替として選択肢から1つだけ選ばせる選択コンポーネントです。5個以下の選択肢をラベル短く一覧で見せるときに使います。
input[type='radio']要素の代替として選択肢から1つだけ選ばせる選択コンポーネントです。5個以下の選択肢をラベル短く一覧で見せるときに使います。
input[type="radio"]要素の代替として選択肢から1つだけ選ばせる選択コンポーネントです。5個以下の選択肢をラベル短く一覧で見せるときに使います。
import { RadioButton } from 'smarthr-ui'
（固有 Props なし）
テーブルセル（Th, Td）内に直接 Checkbox, RadioButton を配置することを禁止するルールです。
SmartHR UI には、デフォルトでアクセシブルネームを設定する TdCheckbox, ThCheckbox, TdRadioButton といったより適切なコンポーネントが用意されています。
❌ NG:
// Td, Th内にCheckbox, RadioButtonを配置しているためNG
<Td>
<Checkbox />
</Td>
<Td>
<RadioButton />
</Td>
<Th>
<Checkbox />
</Th>
// Td, Thに適切にaria-labelledby, aria-label属性を設定していても置き換え推奨のためNG
<Td>
<Checkbox aria-labelledby="id1" />
</Td>
<Td>
<RadioButton aria-labelledby="id2" />
</Td>
<Th>
<Checkbox aria-label="any text" />
</Th>
詳細は eslint-plugin-smarthr の各ルール README を参照してください。
送信 や 保存 などの type="submit" のボタンを押すことで内容が反映される場合に使用するhelpMessage props などを使用するdisabled 状態の組み合わせ、またはステップを複数に分けたモードを検討するnpx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-systemProvides a panel-style radio button component for single selection with support for supplementary text and status labels. Useful when choices need visual emphasis or additional context.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.