Provides context and usage rules for the smarthr-ui Fieldset component, which groups related form inputs under a heading with accessibility enforcement.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-fieldsetThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
fieldset要素の代替として複数の入力要素をグルーピングするコンポーネントです。関連する入力欄を1つの見出しでまとめるときに使います。
fieldset要素の代替として複数の入力要素をグルーピングするコンポーネントです。関連する入力欄を1つの見出しでまとめるときに使います。
fieldset要素の代替として複数の入力要素をグルーピングするコンポーネントです。関連する入力欄を1つの見出しでまとめるときに使います。
import { Fieldset } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| disabled | boolean | - | - | true のとき、文字色を TEXT_DISABLED にする |
| subActionArea | ReactNode | - | - | タイトル右の領域 |
| innerMargin | Gap | - | - | タイトル群と子要素の間の間隔調整用(基本的には不要) |
| statusLabels | FunctionComponentElement | FunctionComponentElement[] | - | - | タイトルの隣に表示する StatusLabel の配列 |
| helpMessage | ReactNode | - | - | タイトルの下に表示するヘルプメッセージ |
| exampleMessage | ReactNode | - | - | タイトルの下に表示する入力例 |
| errorMessages | ReactNode | ReactNode[] | - | - | タイトルの下に表示するエラーメッセージ |
| autoBindErrorInput | boolean | - | - | エラーがある場合に自動的に入力要素を error にするかどうか |
| supplementaryMessage | ReactNode | - | - | フォームコントロールの下に表示する補足メッセージ |
| legend | ReactNode | Omit<{ text: ReactNode; styleType?: TextProps; icon?: any; unrecommendedHide?: boolean; htmlFor?: string; id?: string; }, "htmlFor"> | - | ✓ | - |
fieldset, Fieldset, FormControl を利用する場合、form要素で囲むことを促すルールです。 このルールはsmarthr/a11y-input-in-form-control と組み合わせることでより厳密なチェックを行えます。
❌ NG:
// FormControl、Fieldsetを内包するコンポーネントの場合、名称のsuffixが
// FormControl、Fieldset、もしくはFormControls, Fieldsetsのいずれかである必要があるためNG
const Sample1 = () => (
<>
<StyledFormControl name="field1" />
<StyledFormControl name="field2" />
<StyledFormControl name="field3" />
</>
)
const Sample2 = (props) => (
<Fieldset {...props}>
<Any />
</>
)
✅ OK:
// FormControl、Fieldsetを内包するコンポーネントの場合、名称のsuffixが
// FormControl、Fieldset、もしくはFormControls, Fieldsetsのいずれかの場合OK
const SampleFormControls = () => (
<>
<StyledFormControl name="field1" />
<StyledFormControl name="field2" />
<StyledFormControl name="field3" />
</>
)
const SampleFieldset = (props) => (
<Fieldset {...props}>
<Any />
</>
)
// コンポーネント名を上記の様に調整することで
// これらのコンポーネントを利用する別コンポーネントでも正しくチェックが行えます
入力要素をsmarthr-ui/FormControl、もしくはsmarthr-ui/Fieldsetで囲むことを促すルールです
❌ NG:
// Fieldsetには role="group" がデフォルトで設定されているのでNG
<Fieldset role="group" />
✅ OK:
<Fieldset title="any heading">
{radios.map((a) => (
<RadioButton>{a.label}</RadioButton>
))}
</Fieldset>
<Fieldset title="date range">
<FormControl label={{ text: "start", unrecommendedHide: true }}>
<WarekiPicker />
</FormControl>
~
<FormControl label={{ text: "end", unrecommendedHide: true }}>
<WarekiPicker />
</FormControl>
</Fieldset>
// childrenを持たないFieldset、FormControlは入力要素として扱うためOK
<Fieldset title="any heading">
<HogeFieldset />
<FugaFormControl />
</Fieldset>
form, fieldset, smarthr-ui/Fieldset 以下でSectioningContent(section, aside, article, nav)が利用されている場合、smarthr-ui/Fieldset, fieldset要素に置き換えることを促すルールです。
❌ NG:
// fieldset要素以下にAsideが存在するためNG
const AnyComponent = <Fieldset>
<Aside>
<Heading>ANY TITLE.</Heading>
</Aside>
</Fieldset>
✅ OK:
// form内でSectioningContentを利用していないのでOK
const AnyComponent = (
<form>
<Fieldset title="ANY TITLE.">
Hoge.
<Fieldset title="ANY TITLE.">
Fuga.
<FormControl title="ANY TITLE.">
Piyo.
</FormControl>
</Fieldset>
</Fieldset>
</form>
)
詳細は eslint-plugin-smarthr の各ルール README を参照してください。
readOnly を使用するnpx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-systemProvides guidance for using SmartHR UI FormControl component: attaching labels, help/error messages, and required indicators to single input elements. Includes a11y linting rules.
Builds accessible forms with proper labeling, grouped controls, inline validation (aria-describedby/aria-errormessage), and error summaries linked to inputs.
Designs form labels, instructions, and grouping for screen reader and cognitive accessibility. Use when creating or reviewing forms, input fields, checkboxes, radio buttons, select menus, or any data entry interface.