Skip to main content

TextInput

Renders a text input, providing the ability to specify the type. Use the autoComplete prop to specify an appropriate value and assist users with their data entry.

Examples

TextInput

View standalone
Code
<TextInput
  aria-label="awesome text input"
  id="text-input-1"
  name="text-input-1"
  type="text"
/>

With Label

View standalone
Code
<FormControl>
  <InputLabel htmlFor="text-input-2">
    First Name
  </InputLabel>
  <TextInput
    id="text-input-2"
    name="text-input-2"
    type="text"
  />
</FormControl>

With Icon

View standalone

<TextInput> also facilitates an optional icon to be shown before the input itself.

Code
<TextInput
  aria-label="awesome email input"
  id="text-input-3"
  name="text-input-3"
  startIcon={<ChatIcon />}
  type="email"
/>

Invalid

View standalone

If the <TextInput> value does not meet validation requirements this can also be set. Best used in conjunction with <FormControl>.

Code
<TextInput
  aria-label="awesome email input"
  id="text-input-4"
  invalid
  name="text-input-4"
  type="email"
/>

Valid

View standalone

If the <TextInput> meets validation requirements this can also be set. Best used in conjunction with <FormControl>.

Code
<TextInput
  aria-label="awesome email input"
  id="text-input-5"
  name="text-input-5"
  success
  type="email"
/>

Placeholder

View standalone

TextInput with a placeholder. Be careful when using __dangerousPlaceholder, this is only a visual addition. When using __dangerousPlaceholder it should always be complemented with an ariaLabel or a label element. See W3 - placeholder-text or Smashingmagazine - placeholder-attribute for more information about placeholders.

Code
<TextInput
  __dangerousPlaceholder="This is a placeholder"
  aria-label="awesome input"
  id="text-input-5"
  name="text-input-5"
  type="text"
/>

Pattern

View standalone

Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. See MDN - pattern for more information about patterns.

Code
<TextInput
  aria-label="awesome text input"
  id="text-input-6"
  name="text-input-6"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}"
  type="tel"
/>

With Children

View standalone
Code
<TextInput
  aria-label="awesome text input"
  id="text-input-7"
  name="text-input-7"
  type="text"
>
  <Button icon={<SearchIcon />}>
    Search
  </Button>
</TextInput>

Props

invalid

boolean

success

boolean

startIcon

ReactNode

__dangerousPlaceholder

string

Renders a placeholder inside the input. This is only a visual addition. When using a placeholder it should always be complemented with an ariaLabel or a label element. @see https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text