Related components
InputField is the preferred way to render a form field for single-line text and number data.
In addition to text Label (required) and a validation error (optional), InputField accepts all the same props as Input and will pass them on to the Input it renders. However, as with all our composed components, InputField’s className prop will be applied to a containing div—the styling of the individual components inside InputField cannot be altered.
Err on the side of using consistent form fields, but if you really need something with different styling then consider composing your own field from the Input, Label and InlineMessage components.
<Form>
<InputField
name="Email address"
label="Email address"
placeholder="your.name@example.com"
type="email"
className="w-80"
/>
</Form>
API Reference
| Prop | Type | Default | Required |
|---|---|---|---|
appearance | "standard" | "modern" | - | - |
as | JSX.IntrinsicElements | - | - |
description | string | - | - |
error | string | - | - |
family | "body" | "display" | "mono" | Partial<Record<Breakpoint, "body" | "display" | "mono">> | - | - |
hideLabel | boolean | - | - |
label | string | - | |
noCapsize | boolean | - | - |
prompt | { link?: string | undefined; label: string; onClick?: (() => void) | undefined; } | - | - |
size | "sm" | "md" | "lg" | "xl" | - | - |
state | "error" | - | - |
theme | "white" | "grey" | - | - |
validation | ValidationOptions | - | - |
weight | "bold" | "normal" | Partial<Record<Breakpoint, "bold" | "normal">> | - | - |