Text Input

Input field for entering alpha-numerical information.

UsageGuidelinesAPI

Use Text Input...

To input or edit freeform alpha-numerical information.
To input a single line of text.

Don't use Text Input...

To input information that can be predicted from a list of suggested values. Use Combobox instead.
To input multiple lines of text. Use Text Area instead.
To create a search field. Use Search Input or Combobox With Search Input instead.

ReactVanilla

<TextInput placeholder="Placeholder text" />

<TextInput placeholder="Placeholder text" />

<input
  placeholder="Placeholder text"
  type="text"
  class="swan-polyfill-empty swan-input"
  value=""
/>

<input
  placeholder="Placeholder text"
  type="text"
  class="swan-polyfill-empty swan-input"
  value=""
/>

Type

Use an input type that is appropriate for the Text Input's function (e.g., type="email" for an email address field).

ReactVanilla

<TextInput type="email" placeholder="Email" />

<TextInput type="email" placeholder="Email" />

<input
  placeholder="Email"
  type="email"
  class="swan-polyfill-empty swan-input"
  value=""
/>

<input
  placeholder="Email"
  type="email"
  class="swan-polyfill-empty swan-input"
  value=""
/>

Placeholder

Use placeholder to provide hints for what to enter.

Size

size is deprecated in SWAN v3.3

The component now automatically handles sizing based on the selected mode(standardMode/compactMode). Please update your implementation to rely on the new mode-based sizing.

Mini

Use size="mini" to reduce the height of a Text Input.

ReactVanilla

<TextInput placeholder="Placeholder text" size="mini" />

<TextInput placeholder="Placeholder text" size="mini" />

<input
  placeholder="Placeholder text"
  type="text"
  class="swan-input swan-input-mini"
/>

<input
  placeholder="Placeholder text"
  type="text"
  class="swan-input swan-input-mini"
/>

Disabled

Use disabled to prevent a user from entering text. Only use the disabled state; when the text input is part of a read-only form and its information cannot be changed.

When Text Input is part of a Form, use helper text to explain why it is not editable. Otherwise, use a clear label to explain it.

ReactVanilla

<StandardForm>
  <FormField>
    <FormLabel>
      FormLabel <FormLabelOptional>(Optional)</FormLabelOptional>
    </FormLabel>
    <FormInputGroup>
      <TextInput disabled placeholder="Placeholder..." />
      <FormHelper>Explain why the field is disabled</FormHelper>
    </FormInputGroup>
  </FormField>
</StandardForm>

<StandardForm>
  <FormField>
    <FormLabel>
      FormLabel <FormLabelOptional>(Optional)</FormLabelOptional>
    </FormLabel>
    <FormInputGroup>
      <TextInput disabled placeholder="Placeholder..." />
      <FormHelper>Explain why the field is disabled</FormHelper>
    </FormInputGroup>
  </FormField>
</StandardForm>

<input
  placeholder="Placeholder text"
  type="text"
  class="swan-polyfill-empty swan-input"
  value=""
/>

<input
  placeholder="Placeholder text"
  type="text"
  class="swan-polyfill-empty swan-input"
  value=""
/>

With floating label

An alternate way to display the TextInput with the label positioned inside it, above the selection. To achieve that, use the InputWithFloatingLabel component.

Note: the floating label has the same appearance as placeholder text but it is not an HTML placeholder; any actual placeholder attribute on the text area is transparent.

ReactVanilla

<InputWithFloatingLabel>
  <FloatingLabel>Floating label</FloatingLabel>
  <TextInput />
</InputWithFloatingLabel>

<InputWithFloatingLabel>
  <FloatingLabel>Floating label</FloatingLabel>
  <TextInput />
</InputWithFloatingLabel>

<div class="swan-input-with-floating-label">
  <input
    type="text"
    placeholder=""
    class="swan-polyfill-empty swan-input"
    value=""
  /><label>Floating label</label>
</div>

<div class="swan-input-with-floating-label">
  <input
    type="text"
    placeholder=""
    class="swan-polyfill-empty swan-input"
    value=""
  /><label>Floating label</label>
</div>

With Button beside

Use TextInputWithButtonBeside to group a text input and button together.

ReactVanilla

<TextInputWithButtonBeside>
  <InputWithFloatingLabel>
    <TextInput />
    <FloatingLabel>Floating label</FloatingLabel>
  </InputWithFloatingLabel>
  <Button skin="primary">Go</Button>
</TextInputWithButtonBeside>

<TextInputWithButtonBeside>
  <InputWithFloatingLabel>
    <TextInput />
    <FloatingLabel>Floating label</FloatingLabel>
  </InputWithFloatingLabel>
  <Button skin="primary">Go</Button>
</TextInputWithButtonBeside>

<div role="group" class="swan-input-with-button-beside">
  <div class="swan-input-with-floating-label">
    <input
      placeholder=" "
      class="swan-input"
      id="auto-id-8tr115lvd-106"
    /><label class="swan-label" for="auto-id-8tr115lvd-106"
      >Floating label</label
    >
  </div>
  <button type="button" class="swan-button swan-button-skin-primary">Go</button>
</div>

<div role="group" class="swan-input-with-button-beside">
  <div class="swan-input-with-floating-label">
    <input
      placeholder=" "
      class="swan-input"
      id="auto-id-8tr115lvd-106"
    /><label class="swan-label" for="auto-id-8tr115lvd-106"
      >Floating label</label
    >
  </div>
  <button type="button" class="swan-button swan-button-skin-primary">Go</button>
</div>

With icon-only Button inset

Use TextInputWithButtonInset to place an icon-only Button within the Text Input. You can also position the enclosed button either "left" or "right" by using the prop buttonPosition.

ReactVanilla

() => {
  const [showPassword, setShowPassword] = React.useState(false)
  return (
    <>
      <TextInputWithButtonInset>
        <TextInput
          type={showPassword ? 'text' : 'password'}
          placeholder="Password"
        />
        <Button onClick={() => setShowPassword(s => !s)}>
          <Icon iconType={showPassword ? 'passwordHide' : 'passwordShow'} />
        </Button>
      </TextInputWithButtonInset>
    </>
  )
}

() => {
  const [showPassword, setShowPassword] = React.useState(false)
  return (
    <>
      <TextInputWithButtonInset>
        <TextInput
          type={showPassword ? 'text' : 'password'}
          placeholder="Password"
        />
        <Button onClick={() => setShowPassword(s => !s)}>
          <Icon iconType={showPassword ? 'passwordHide' : 'passwordShow'} />
        </Button>
      </TextInputWithButtonInset>
    </>
  )
}

<div class="swan-input-with-button-inset">
  <input
    placeholder="Search..."
    type="text"
    class="swan-polyfill-empty swan-input"
    value=""
  /><button type="button" class="swan-button swan-button-skin-secondary">
    <img alt="search" src="{{ "search" | icon }}" class="swan-icon
    swan-icon-size-20p" />
  </button>
</div>
<br />
<div class="swan-input-with-button-inset swan-input-with-button-left">
  <input
    placeholder="Search..."
    type="text"
    class="swan-polyfill-empty swan-input"
    value=""
  /><button type="button" class="swan-button swan-button-skin-secondary">
    <img alt="search" src="{{ "search" | icon }}" class="swan-icon
    swan-icon-size-20p" />
  </button>
</div>

<div class="swan-input-with-button-inset">
  <input
    placeholder="Search..."
    type="text"
    class="swan-polyfill-empty swan-input"
    value=""
  /><button type="button" class="swan-button swan-button-skin-secondary">
    <img alt="search" src="{{ "search" | icon }}" class="swan-icon
    swan-icon-size-20p" />
  </button>
</div>
<br />
<div class="swan-input-with-button-inset swan-input-with-button-left">
  <input
    placeholder="Search..."
    type="text"
    class="swan-polyfill-empty swan-input"
    value=""
  /><button type="button" class="swan-button swan-button-skin-secondary">
    <img alt="search" src="{{ "search" | icon }}" class="swan-icon
    swan-icon-size-20p" />
  </button>
</div>

Labels, Errors, and Helper Text

Refer to Form guidelines.

Managing State in React

Refer to Form guidelines.

Accessibility

Refer to the accessibility guidelines for Form.

Implementation

Inputs default to a width of 100%, filling up their container; this is a best practice for responsive design.
To limit an input's width, you should constrain its container, e.g., by putting it into a Grid element of a certain number of columns.

Content

Do

Where possible, assist the user with placeholder text to provide examples of what to enter.

Dont

Use ellipsed text, as it will lead to incomplete information.

Do

Keep label text succinct.

Props

TextInput

See core props for additional props that can be applied to this component.

prop	type	required	default	deprecation notes
`skin` The visual variant. Note that error is implied if the TextInput is used inside of a FormInput that also contains a FormError.	`"standard""error"null`	false	standard
⚠️ Deprecated `size` The size variation @deprecated This is deprecated without a replacement.	`"standard""mini"null`	false	standard	This is deprecated without a replacement.
`htmlSize` The width of the input, as defined by the number of characters it can display at once. This corresponds to the HTML `size` attribute.	`number`	false	null

TextInputWithButtonInset

See core props for additional props that can be applied to this component.

prop	type	required	default
`buttonPosition` Position of the button.	`"left""right"null`	false	right

Text Input

Use Text Input...

Don't use Text Input...

Type

Placeholder

Size

Mini

Disabled

With floating label

With Button beside

With icon-only Button inset

Labels, Errors, and Helper Text

Managing State in React

Accessibility

Implementation

Content

Do

Dont

Do

Props

Related