TextField

Renders a single-line <input> or multi-line <textarea>. Use inside Field to add a label, hint, and error message.

Input types

Text

Password

Number

<Field label="Text" id="tf-text">
  <TextField name="tf-text" type="text" />
</Field>

<Field label="Email" id="tf-email">
  <TextField name="tf-email" type="email" />
</Field>

<Field label="Password" id="tf-pass">
  <TextField name="tf-pass" type="password" />
</Field>

Textarea

Message

<Field label="Message" id="tf-ta">
  <TextField name="tf-ta" type="textarea" rows={4} />
</Field>

Sizes

Small

Medium

Large

<TextField name="tf-sm" size="sm" />
<TextField name="tf-md" size="md" />
<TextField name="tf-lg" size="lg" />

States

Disabled

With value

<TextField name="tf-dis" disabled />
<TextField name="tf-val" value="Prefilled value" />