Skip to content

InputField

Alpha
The InputField component is used to render a labelled text input and, optionally, associated validation text and hint text.

Examples

Basic

Required

Disabled

Using different input components

With a visually hidden label

Every input must have a corresponding label to be accessible to assistive technology. That's why you'd use InputField instead of using TextInput directly.

InputField also provides an interface for showing a hint text caption and a validation message, and associating those with the input for assistive technology.

With a caption

With validation

Props

InputField

The container that handles the layout and passes the relevant IDs and ARIA attributes it's children.

NameTypeDefaultDescription
children Required
InputField.Label | InputField.Caption | InputField.Validation | Autocomplete | TextInput | TextInputWithTokens | Select
disabled
boolean
falseWhether the field is ready for user input
id
string
a generated stringThe unique identifier for this field. Used to associate the label, validation text, and caption text
required
boolean
falseWhether the field is ready for user input
validationMap
Record<string, 'error'|'sucess'>
A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop, the associated validation message will be rendered in the correct style
validationResult
string
The key of the validation message to show

InputField.Label

A InputField.Label must be passed for the field to be accessible to assistive technology, but it may be visually hidden.

NameTypeDefaultDescription
boolean
InputField.Label | InputField.Caption | InputField.Validation | Autocomplete | TextInput | TextInputWithTokens
falseWhether the label should be visually hidden

InputField.Caption

InputField.Caption may be used to render hint text for fields that require additional context.

NameTypeDefaultDescription
children
React.ReactNode
The content (usually just text) that is rendered to give contextual info about the field

InputField.Validation

InputField.Validation may be used to render contextual validation information if the field was flagged during validation.

NameTypeDefaultDescription
children
React.ReactNode
The content (usually just text) that is rendered to give contextual info about the validation result for the field
validationKey
string
The key of the property from `InputField` that corresponds to this validation message. When `InputField`'s `validationResult` prop matches `InputField.Validation`'s `validationKey` prop, this message is shown.

Component status

Alpha

  • Component props are documented on primer.style/react.
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has 100% test coverage.

Beta

  • Component is used in a production application.
  • Common usage examples are documented on primer.style/react.
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Stable

  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.
Edit this page on GitHub
2 contributorsmperrottiPeterYangIO
Last edited by mperrotti on January 11, 2022