Input Field

View source Report an issue Edit this page

InputField renders a field composed of an Input, a Label and a InlineMessage

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 css prop will be applied to a containing Box—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="[email protected]"
    type="email"
    css={{ width: 320 }}
  />
</Form>

API Reference

Prop	Type	Default	Required
`size`	`"sm"` \| `"md"`	-	-
`state`	`"error"`	-	-
`css`	`CSSProperties`	-	-
`name`	`string`	-
`as`	`JSX.IntrinsicElements`	-	-
`type`	`"number"` \| `"text"` \| `"search"` \| `"email"` \| `"password"` \| `"tel"` \| `"url"`	-	-
`label`	`string`	-
`error`	`string`	-	-
`prompt`	`{ link: string; label: string; }`	-	-
`description`	`string`	-	-
`hideLabel`	`boolean`	-	-
`validation`	`ValidationOptions`	-	-