TextInput

StorybookGithub

stable

TextInput is a form component, that allows users to input text or numbers and should be used in a form context.

How to use TextInput

The TextInput component can be configured in a number of different ways. Use this guidance to determine the correct variation based on the context.

TextInput is supporting different types of inputs, like 'text' | 'email' | 'file' | 'number' | 'password' | 'search' | 'url', where text is the default.

Code examples

Basic example

<TextInput
  type="email"
  name="email"
  label="Email address"
  aria-label="Email input"
/>
<TextInput
  type="email"
  name="email"
  label="Email address"
  aria-label="Email input"
/>
Hide source

TextInput with label

In order to create a correct text input the recommendation is to add a label to any kind of input. In order to do that, we provide you couple of additional components that you can use to compose your inputs with labels, help or validation messages. Read more about FormControl

<FormControl>
  <FormControl.Label>Add your email</FormControl.Label>
  <TextInput
    type="email"
    name="email"
    label="Email address"
    placeholder="Email"
  />
  <FormControl.HelpText>Provide your email</FormControl.HelpText>
  <FormControl.ValidationMessage>
    Format of the email is not correct
  </FormControl.ValidationMessage>
</FormControl>
<FormControl>
  <FormControl.Label>Add your email</FormControl.Label>
  <TextInput
    type="email"
    name="email"
    label="Email address"
    placeholder="Email"
  />
  <FormControl.HelpText>Provide your email</FormControl.HelpText>
  <FormControl.ValidationMessage>
    Format of the email is not correct
  </FormControl.ValidationMessage>
</FormControl>
Hide source

TextInput with buttons

TextInput.Group enables the user to set a button at the start or end of an input, with some spacing or collapsed. Example of usage:

// 
// 
// 

<TextInput.Group>
  <TextInput
    aria-label="some-label"
    id="TextInput1"
    defaultValue="Some value"
  />
  <IconButton variant="secondary" icon={<LockIcon />} aria-label="Lock" />
</TextInput.Group>
// 
// 
// 

<TextInput.Group>
  <TextInput
    aria-label="some-label"
    id="TextInput1"
    defaultValue="Some value"
  />
  <IconButton variant="secondary" icon={<LockIcon />} aria-label="Lock" />
</TextInput.Group>
Hide source

Example of spaced TextInput.Group.

// 
// 
// 

<TextInput.Group spacing="spacingS">
  <TextInput
    aria-label="some-label"
    id="TextInput2"
    defaultValue="Some value"
  />
  <IconButton variant="secondary" icon={<LockIcon />} aria-label="Lock" />
</TextInput.Group>
// 
// 
// 

<TextInput.Group spacing="spacingS">
  <TextInput
    aria-label="some-label"
    id="TextInput2"
    defaultValue="Some value"
  />
  <IconButton variant="secondary" icon={<LockIcon />} aria-label="Lock" />
</TextInput.Group>
Hide source

TextInput variations

Keep in mind, that if you need to use an input without a label, you need to pass aria-label attribute to create an input that would be accessible to assistive technologies, like screen readers.

TextInput with placeholder

<TextInput
  label="Token"
  name="token"
  id="input-2"
  aria-label="token"
  placeholder="Token"
/>
<TextInput
  label="Token"
  name="token"
  id="input-2"
  aria-label="token"
  placeholder="Token"
/>
Hide source

TextInput disabled

<TextInput
  label="Token"
  name="token"
  id="input-2"
  aria-label="token"
  isDisabled
/>
<TextInput
  label="Token"
  name="token"
  id="input-2"
  aria-label="token"
  isDisabled
/>
Hide source

TextInput invalid

<TextInput
  label="Token"
  name="token"
  id="input-2"
  aria-label="token"
  isInvalid
/>
<TextInput
  label="Token"
  name="token"
  id="input-2"
  aria-label="token"
  isInvalid
/>
Hide source

Content guidelines

Accessibility

Props

TextInput

• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  defaultValue

  Description

  Set's default value for text input

  string
• Name

  icon

  Description

  Expects any of the icon components

  ReactElement<any, string | JSXElementConstructor<any>>
• Name

  id

  Description

  Sets the id of the input

  string
• Name

  isDisabled

  Description

  Applies disabled styles

  false

  true
• Name

  isInvalid

  Description

  Applies invalid styles

  false

  true
• Name

  isReadOnly

  Description

  Applies read-only styles

  false

  true
• Name

  isRequired

  Description

  Validate the input

  false

  true
• Name

  name

  Description

  Set the name of the input

  string
• Name

  onBlur

  Description

  Allows to listen to an event when an element loses focus

  FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>
• Name

  onChange

  Description

  Allows to listen to an input’s change in value

  ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
• Name

  onFocus

  Description

  Allows to listen to an event when an element get focused

  FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>
• Name

  onKeyDown

  Description

  Allows to listen to an event when a key is pressed

  KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>
• Name

  size

  Description

  Defines which size of the input should be rendered

  "small"

  "medium"

  Default

  medium
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-text-input
• Name

  type

  Description

  Set the type of the input

  "number"

  "text"

  "email"

  "file"

  "password"

  "search"

  "url"
• Name

  value

  Description

  Set the value of the input

  string
• Name

  willBlurOnEsc

  Description

  Boolean property that allows to blur on escape

  false

  true

TextInput.Group

• Name

  children(required)

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  spacing

  Description

  Sets the spacing of the elements if variant is separate.

  "spacing2Xs"

  "spacingXs"

  "spacingS"

  "spacingM"

  "spacingL"

  "spacingXl"

  "spacing2Xl"

  "spacing3Xl"

  "spacing4Xl"

  "none"
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string