Text Fieldテキストフィールド
1行のテキストを入力するためのコンポーネントです。Buttonなどと合わせてフォームを構成します。複数行にはTextAreaを使用してください。
更新 2025/3/21
状態
4種類の状態があります。入力必須とする際はrequired propsを使用し、非活性とする際はdisabled propsを使用してください。
- Enabled
入力方法などに関するヘルプテキスト
- Filled
入力方法などに関するヘルプテキスト
- Error
入力方法などに関するヘルプテキスト
入力の誤りに関するテキスト
- Focus
入力方法などに関するヘルプテキスト
- Disabled
入力方法などに関するヘルプテキスト
import { TextField } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";
export function StateSample() {
return (
<Dl>
<Dt>Enabled</Dt>
<Dd>
<TextField
description="入力方法などに関するヘルプテキスト"
invalidMessage="入力の誤りに関するテキスト"
label="ラベル"
placeholder="プレースホルダー"
required
/>
</Dd>
<Dt>Filled</Dt>
<Dd>
<TextField
description="入力方法などに関するヘルプテキスト"
invalidMessage="入力の誤りに関するテキスト"
label="ラベル"
placeholder="プレースホルダー"
required
value="入力中"
/>
</Dd>
<Dt>Error</Dt>
<Dd>
<TextField
description="入力方法などに関するヘルプテキスト"
invalidMessage="入力の誤りに関するテキスト"
label="ラベル"
placeholder="プレースホルダー"
required
invalid
value="入力中"
/>
</Dd>
<Dt>Focus</Dt>
<Dd>
<TextField
description="入力方法などに関するヘルプテキスト"
invalidMessage="入力の誤りに関するテキスト"
label="ラベル"
placeholder="プレースホルダー"
data-focus
/>
</Dd>
<Dt>Disabled</Dt>
<Dd>
<TextField
description="入力方法などに関するヘルプテキスト"
invalidMessage="入力の誤りに関するテキスト"
label="ラベル"
placeholder="プレースホルダー"
disabled
/>
</Dd>
</Dl>
);
}
Password Field
パスワード入力用のテキストフィールドです。パスワードの表示・非表示を切り替えることができます。
import { PasswordField, TextField } from "@serendie/ui";
import { HBox } from "src/components/LayoutUtils";
export function PasswordFieldSample() {
return (
<HBox>
<PasswordField
placeholder="パスワードを入力"
label="パスワード"
required
/>
</HBox>
);
}