Text Field

Text Fields allow users to input text and numbers.

Overview

Text fields should be used when dealing with various text formats, e.g. email addresses, telephone numbers, numbers and passwords. A label, hint text and error message are included in all Text Field components.

Usage

Text Field


Edit live code
<TextField id="name" label="Name" /><TextField id="name" label="Name" />

Number Field

Used to input general numbers.


Edit live code
<NumberField id="age-2" label="Age" characters={4} /><NumberField id="age-2" label="Age" characters={4} />

Tel Field

Used to input a telephone number.


Edit live code
<TelField id="tel" label="Mobile" characters={11} /><TelField id="tel" label="Mobile" characters={11} />

Email Field

Used to input an email address.


Edit live code
<EmailField id="email" label="Email field" characters={25} /><EmailField id="email" label="Email field" characters={25} />

Password field

Used to enter a password


Edit live code
<PasswordField id="password" label="Password" characters={25} /><PasswordField id="password" label="Password" characters={25} />

Note: with the disableAutocomplete theme config flag enabled, autoComplete defaults to "off" like every other text field, but Chrome and Firefox deliberately ignore autocomplete="off" on password fields to preserve their password-manager suggestions. The default won't reliably suppress that browser UI.

Validation

Avoid default HTML form validation
Avoid validation while typing
Always validate and show error messages once the form has been submitted

Error messages should appear above the input, and below the label and help text. These should be written in a concise, specific, way using plain language and without pleasantries.

Accessibility

Text Field groups need a group label, which should always sit aligned above it. This label allows users to understand what to enter as well as auto focussing the input which creates a larger touch target.

Variations

Input Length

Making text inputs the right size for the content they are used to collect helps the user understand what to enter.


Edit live code
<TextField id="year" label="Year" characters={4} /><TextField id="year" label="Year" characters={4} />

Hint Text

Hint text should appear below the label and above the input. Do not use placeholders.


Edit live code
<TextField id="name-4" label="Name" hint="Used for contacting you" /><TextField id="name-4" label="Name" hint="Used for contacting you" />

Validation Error


Edit live code
<TextField id="name-5" label="Name" error="Enter a name" /><TextField id="name-5" label="Name" error="Enter a name" />

Note that when used within the Form component, Nebula field components do not need to define the error prop - it will be automatically set using Context, using the name prop for each field.

Full Width

Text inputs by default will be responsive and will be displayed as full width below the smallest breakpoint. This can be overriden by setting fullWidth="always" and fullWidth="never".


Edit live code
<TextField
  id="name-6"
  label="Name"
  hint="Used for contacting you"
  fullWidth="always"
/><TextField
  id="name-6"
  label="Name"
  hint="Used for contacting you"
  fullWidth="always"
/>

With Icon

Text inputs can show an icon to the left or right of the input by using the iconLeft or iconRight props. See the Icon Component for adding additional icons.


Edit live code
<TextField id="name" label="Name" iconLeft="gas" /><TextField id="name" label="Name" iconLeft="gas" />

Character Limit

Set characterLimit to show a live character count against a defined limit. The count updates as the user types and is shown from the start, with no threshold. Typing past the limit is never blocked — there's no hard stop — the counter switches to an error style instead, and it's up to your form validation to surface an error once the field is submitted over the limit.


Edit live code
<TextField id="description" label="Description" characterLimit={50} /><TextField id="description" label="Description" characterLimit={50} />


Edit live code
<TextField
  id="description-exceeded"
  label="Description"
  characterLimit={50}
  defaultValue="This description is quite a bit longer than the fifty character limit allows."
  error="Description must be 50 characters or fewer"
/><TextField
  id="description-exceeded"
  label="Description"
  characterLimit={50}
  defaultValue="This description is quite a bit longer than the fifty character limit allows."
  error="Description must be 50 characters or fewer"
/>

Do not use the native maxLength attribute alongside a character limit — it silently blocks further typing (a "hard stop"), which is exactly what this pattern is designed to avoid. Use characterLimit instead.

Autocomplete

Browser autofill on this field is controlled by a transitional theme property. Learn how to enable it in your app.

Properties

Name	Values	Default
id (required)	String
label (required)	String
optional	Boolean	false
hint	ReactNode
error	ReactNode
characters	Number	25
characterLimitShows a live character count against this limit. Does not block typing past it - pair with an error message on submit.	Number
fullWidth	alwaysneversmall	small
iconLeft	IconName
iconRight	IconName
autoCompleteDefaults to "off" when the disableAutocomplete theme config flag is enabled (see the Theme guide); pass autoComplete (e.g. "email") to override for a specific field.	String
...	JSX.IntrinsicElements["input"]

Text Field

Overview

Usage

Text Field

Number Field

Tel Field

Email Field

Password field

Validation

Accessibility

Variations

Input Length

Hint Text

Validation Error

Full Width

With Icon

Character Limit

Autocomplete

Properties

Related