cloudensisdesign system

Input

メールアドレスの形式で入力してください。

ラジオボタン
import { Input } from "@cloudensis/design-system/components/input";

<label for="email">メールアドレス</label>
<Input type="email" id="email" placeholder="name@example.com" />

チェックボックスとラジオボタン

type に checkbox / radio を渡すと、それぞれの見た目になります。ラベルで囲むと、文字をクリックしても選択できます。無効のときは has-disabled でラベルも薄くします。

ラジオボタンのように選択肢をまとめるときは、fieldset と legend で囲み、グループに名前を付けます。

<label class="flex items-center gap-2 has-disabled:text-disabled">
	<Input type="checkbox" name="agree" />
	利用規約に同意する
</label>

<fieldset>
	<legend>プラン</legend>
	<label class="flex items-center gap-2">
		<Input type="radio" name="plan" value="free" />
		無料
	</label>
	<label class="flex items-center gap-2">
		<Input type="radio" name="plan" value="pro" />
		有料
	</label>
</fieldset>

エラー

aria-invalid="true" を付けると、枠線が danger の色になります。色だけでは伝わらないため、エラーの内容を文章で添え、aria-describedby で入力欄と結び付けます。Select と Textarea も同じです。

<label for="email">メールアドレス</label>
<Input type="email" id="email" aria-invalid="true" aria-describedby="email-error" />
<p id="email-error" class="text-danger text-sm">メールアドレスの形式で入力してください。</p>