Text Input

Input field for entering alpha-numerical information.

⚠️ Some props/prop values deprecated in SWAN v3.3
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.

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"
/>

With Floating Label

Use TextInputWithFloatingLabel to create a label inside the input field that shifts position once the user starts entering text.
Note: the floating label looks like a placeholder text but it is not an HTML placeholder; any actual placeholder attribute on the input is transparent.

ReactVanilla

<TextInputWithFloatingLabel>
  <TextInput />
  <TextInputFloatingLabel>Floating label</TextInputFloatingLabel>
</TextInputWithFloatingLabel>

<TextInputWithFloatingLabel>
  <TextInput />
  <TextInputFloatingLabel>Floating label</TextInputFloatingLabel>
</TextInputWithFloatingLabel>

<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>
  <TextInputWithFloatingLabel>
    <TextInput />
    <TextInputFloatingLabel>Floating label</TextInputFloatingLabel>
  </TextInputWithFloatingLabel>
  <Button skin="primary">Go</Button>
</TextInputWithButtonBeside>

<TextInputWithButtonBeside>
  <TextInputWithFloatingLabel>
    <TextInput />
    <TextInputFloatingLabel>Floating label</TextInputFloatingLabel>
  </TextInputWithFloatingLabel>
  <Button skin="primary">Go</Button>
</TextInputWithButtonBeside>

<div role="group" class="swan-input-with-button-beside">
  <div class="swan-input-with-floating-label">
    <input
      type="text"
      placeholder=" "
      class="swan-polyfill-empty swan-input"
      value=""
    /><label>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
      type="text"
      placeholder=" "
      class="swan-polyfill-empty swan-input"
      value=""
    /><label>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.

The typical use case is for search bars, and sign in forms.
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="https://swan.prod.merch.vpsvc.com/v0/icons/search.d1f37693cbff7b84457d46f64486bbc5.svg"
      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="https://swan.prod.merch.vpsvc.com/v0/icons/search.d1f37693cbff7b84457d46f64486bbc5.svg"
      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="https://swan.prod.merch.vpsvc.com/v0/icons/search.d1f37693cbff7b84457d46f64486bbc5.svg"
      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="https://swan.prod.merch.vpsvc.com/v0/icons/search.d1f37693cbff7b84457d46f64486bbc5.svg"
      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

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

Do

Keep label text succinct.

Don't

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

Props

TextInput

This component is implemented using the <input /> as the root element. You can utilize the native attributes supported by <input /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.