Form
基本的なフォームのレイアウト、カスタマイズと入力フィールドのバリエーションを紹介します
サンプルコードでは、ロジックを省略しています
基本となるフォームのレイアウト#
受診の記録を追加
補足の説明
2000/1/1以降の日付を入力してください
必須表記#
複雑なフォームでは、明示的に必須であることをフィールドに表示したほうが良いケースがあります。
<Label>、<CheckboxGroup>または<RadioGroup>はshowRequiredLabel propで必須表記をラベルに追加できます。
<input>要素自体へのreuiqred属性の追加や、バリデーションは提供しません。必要な場合は別途対応してください。
<CheckboxGroup label="チェックボックス" showRequiredLabel>
{options.map((option) => (
<Checkbox key={option} value={option} name="checkbox">
{option}
</Checkbox>
))}
</CheckboxGroup>
ヘルパーテキスト#
入力フィールドへ説明がある場合に使用します<Stack>の子、かつ入力フィールドのすぐ下に<HelperMessage>を追加してください。
import { HelperMessage } from '@ubie/ubie-ui';
<Stack spacing="xs">
<Label htmlFor="field1">フィールド</Label>
<Input value={value} id="field1" />
<HelperMessage>半角数字、0〜99の間で入力してください</HelperMessage>
<HelperMessage>２つ目の説明</HelperMessage>
</Stack>
ラジオボタンなどでは、<RadioGroup>につづけてください
<Stack spacing="xs">
<RadioGroup label="ラジオカード">
{options.map((option) => (
<RadioCard key={option} value={option} name="radio-card">
{option}
</RadioCard>
))}
</RadioGroup>
<HelperMessage>1つ目の説明</HelperMessage>
<HelperMessage>２つ目の説明</HelperMessage>
</Stack>
エラー表示#
propで対応している場合は、入力フィールド（例では<Input>）にisInvalidを追加します。そして、<Stack>の子に<ErrorMessage>を追加してください。
0〜99の範囲で入力してください
半角数字を入力してください
説明文です
<HelperMessage>が存在する場合は、（エラーがあることを迅速に伝えるため）<ErrorMessage>を先に記述してください。 <ErrorMessage>は複数配置することができます。
やや複雑なレイアウト#
横並びのテキストフィールド（生年月日など）#
この例では、固有のスタイルを適用するために<Label>コンポーネントではなく<label>要素を使用しています。レスポンシブデザインの考慮はしていないため、横幅に注意してください。
CSSのgrid-template-columnsの値を説明します。80pxは<Input>の幅を指定しています。autoは<Label>の幅にあたり、指定された文字列の長さに合わせて伸縮します。1frは余ったスペースを専有します。
カスタマイズ
- 項目を追加したい場合は
.tsxと.cssの修正が必要です。まず、.tsxへ<label>と<Input>のペアを追加してください。次に、.cssの.wrapperのgrid-template-columns行へ、1frの前に80px autoを追加してください。<div className={styles.wrapper}> ... <Input id="one-date" /> <label className={styles.label} htmlFor="one-date"> 日 </label> <Input id="one-add" /> <label className={styles.label} htmlFor="one-add"> 追加 </label> </div>.wrapper { ... grid-template-columns: 80px auto 80px auto 80px auto 80px auto 1fr; ... } <Input>の幅を変えたい場合は、CSSのgrid-template-columnsプロパティに記述された80pxを修正してください.wrapper { ... grid-template-columns: 120px auto 80px auto 80px auto 1fr; ... }- 全体を右寄せにしたい場合は、CSSの
grid-template-columnsプロパティに記述された1frを削除し、justify-content: end;を追加してください.wrapper { ... grid-template-columns: 80px auto 80px auto 80px auto; justify-content: end; }
2カラム#
カスタマイズ
行を増やしたい場合は、<Stack>でまとまった入力項目を増やしてください。2カラムのまま、自動で行が増えていきます。