Text input

Text inputs are used for inputting single line text data.

Examples

Base

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__base">Label</chi-label>
  <chi-text-input id="example__base"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__base">Label</label>
  <input type="text" class="chi-input" id="example__base">
</div>

Disabled

Use the disabled boolean attribute to prevent users from interacting with an input. Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus. Note: The required attribute can not be used on inputs with a disabled attribute specified.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__disabled">Label</chi-label>
  <chi-text-input id="example__disabled" value="Sample Text" disabled></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__disabled">Label</label>
  <input type="text" class="chi-input" id="example__disabled" value="Sample Text" disabled>
</div>

Readonly

Use the readonly boolean attribute to prevent users from changing an input value. Unlike disabled inputs, readonly inputs are submitted with the form and can still receive browsing events such as mouse clicks and focus. Note: The required attribute can not be used on inputs with a readonly attribute specified.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__readonly">Label</chi-label>
  <chi-text-input id="example__readonly" value="Sample Text" readonly></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__readonly">Label</label>
  <input type="text" class="chi-input" id="example__readonly" value="Sample Text" readonly>
</div>

Placeholder

Use the placeholder attribute to provide users with an example of the type of data that can be entered into an input. Note: Placeholder text is not persistent and visually disappears when a value is entered.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__placeholder">Label</chi-label>
  <chi-text-input id="example__placeholder" placeholder="Placeholder"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__placeholder">Label</label>
  <input type="text" class="chi-input" id="example__placeholder" placeholder="Placeholder">
</div>

Spinner

Use the spinner attribute to let users know when information is saving or loading.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__spinner">Label</chi-label>
  <chi-text-input id="example__spinner" spinner></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__spinner">Label</label>
  <div class="chi-input__wrapper">
    <input type="text" class="chi-input" id="example__spinner">
    <svg class="chi-spinner -icon--muted" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
  </div>
</div>

Required

Use the required boolean attribute to indicate which inputs must be completed before submitting a form. This is useful for capturing important information and reducing the risk of form errors. To render a required input, apply the required attribute to the input. It is also encouraged but not mandatory to apply a required attribute to the corresponding label of the input which will automatically render a red asterisk. Note: For HTML Blueprint implementations, the required attribute is not supported on the label. Please use the alternate method specified below for rendering a red asterisk within the label.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__required" required>Label</chi-label>
  <chi-text-input id="example__required" required></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__required">
    Label
    <abbr class="chi-label__required" title="Required field">*</abbr>
  </label>
  <input type="text" class="chi-input" id="example__required" required>
</div>

Optional

When the vast majority of inputs in a form are required, optional can be used to help emphasize the few that are not. This is useful for inputs that are not relevant to all users, such as an Address Line 2 text input in a Billing or Shipping address form. If the user does not have an apartment, suite, or unit number, applying optional to chi-label will help convey the labels corresponding input is not required and can be skipped. Note: For HTML Blueprint implementations, the optional boolean attribute is not supported on the label. Please use the alternate method specified below for rendering optional text within the label.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__optional" optional>Label</chi-label>
  <chi-text-input id="example__optional"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__optional">
    Label
    <abbr class="chi-label__optional" title="Optional field">(optional)</abbr>
  </label>
  <input type="text" class="chi-input" id="example__optional">
</div>

Help

Use chi-label__help to include a help icon that displays helpful information about an input in a popover. A help icon must be contained within an icon button to ensure it receives focus when a user tabs through a form.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <div class="chi-label__wrapper">
    <chi-label for="example__label-with-icon">Label</chi-label>
    <div class="chi-label__help">
      <chi-button id="example__help-button" type="icon" size="sm" variant="flat" alternative-text="Help">
        <chi-icon icon="circle-info-outline"></chi-icon>
      </chi-button>
      <chi-popover id="example__help-popover" position="top" variant="text" arrow reference="#example__help-button">
        Helpful information goes here.
      </chi-popover>
    </div>
  </div>
  <chi-text-input id="example__label-with-icon"></chi-text-input>
</div>

<script>
  document.querySelector("#example__help-button")
    .addEventListener("click", function() {
      var popoverElem = document.querySelector("#example__help-popover");
      popoverElem.toggle();
    });
</script>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<div class="chi-form__item">
  <div class="chi-label__wrapper">
    <label class="chi-label" for="example__label-with-icon">Label</label>
    <div class="chi-label__help">
      <div class="chi-button -icon -flat -sm" id="example__help-button" data-target="#example__help-popover" aria-label="Help">
        <div class="chi-button__content">
          <i class="chi-icon icon-circle-info-outline"></i>
        </div>
      </div>
      <section class="chi-popover chi-popover--top" id="example__help-popover" aria-modal="true" role="dialog">
        <div class="chi-popover__content">
          <p class="chi-popover__text">Helpful information goes here.</p>
        </div>
      </section>
    </div>
  </div>
  <input class="chi-input" id="example__label-with-icon" type="text">
</div>

<script>chi.popover(document.getElementById('example__help-button'));</script>

Message

Add a message below an input to store descriptions, validation feedback, and other helpful information.

Label

Optional input message

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__message">Label</chi-label>
  <chi-text-input id="example__message"></chi-text-input>
  <div class="chi-label -status">Optional input message</div>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__message">Label</label>
  <input class="chi-input" id="example__message" type="text">
  <div class="chi-label -status">Optional input message</div>
</div>

Error

Use the danger state to provide feedback to users when input data fails to validate. To meet accessibility requirements, danger inputs must include an error message explaining the failure and/or how to correct it.

Name

Please enter a name.

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__danger">Name</chi-label>
  <chi-text-input id="example__danger" state="danger"></chi-text-input>
  <div class="chi-label -status -danger">Please enter a name.</div>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__danger">Name</label>
  <input type="text" class="chi-input -danger" id="example__danger">
  <div class="chi-label -status -danger">Please enter a name.</div>
</div>

Layout Variations

Inline Label

Apply the class -row to chi-form__item to render labels and inputs inline.

Label

Web Component
HTML Blueprint

<div class="chi-form__item -row">
  <chi-label for="example__inline-label">Label</chi-label>
  <chi-text-input id="example__inline-label"></chi-text-input>
</div>

<div class="chi-form__item -row">
  <label class="chi-label" for="example__inline-label">Label</label>
  <input class="chi-input" type="text" id="example__inline-label">
</div>

Inline Label - width controlled using percent

Label width 50%

Web Component
HTML Blueprint

<div class="chi-form__item -row">
  <chi-label class="-w--50" for="example__inline-label-percent">Label width 50%</chi-label>
  <div class="-w--50">
    <chi-text-input id="example__inline-label-percent"></chi-text-input>
  </div>
</div>

<div class="chi-form__item -row">
  <label class="chi-label -w--50" for="example__inline-label-percent">Label</label>
  <div class="-w--50">
    <input class="chi-input" type="text" id="example__inline-label-percent">
  </div>
</div>

Inline Label - width controlled using grid

Label width 3 columns

Web Component
HTML Blueprint

<div class="chi-form__item -row chi-grid -no-gutter">
  <chi-label class="chi-col -w--3" for="example__inline-label-grid">Label width 3 columns</chi-label>
  <chi-text-input class="chi-col -w--9" id="example__inline-label-grid"></chi-text-input>
</div>

<div class="chi-form__item -row chi-grid -no-gutter">
  <label class="chi-label chi-col -w--3" for="example__inline-label-grid">Label</label>
  <input class="chi-input chi-col -w--9" type="text" id="example__inline-label-grid">
</div>

Inline Inputs

Label

Web Component
HTML Blueprint

<div class="-d--flex">
  <div class="chi-form__item -inline -flex--grow1">
    <chi-label for="example__inline-input01">Label</chi-label>
    <chi-text-input id="example__inline-input01"></chi-text-input>
  </div>
  <div class="chi-form__item -inline -flex--grow1">
    <chi-label for="example__inline-input02">Label</chi-label>
    <chi-text-input id="example__inline-input02"></chi-text-input>
  </div>
</div>

<div class="-d--flex">
  <div class="chi-form__item -inline -flex--grow1">
    <label class="chi-label" for="example__inline-input01">Label</label>
    <input class="chi-input" type="text" id="example__inline-input01">
  </div>
  <div class="chi-form__item -inline -flex--grow1">
    <label class="chi-label" for="example__inline-input02">Label</label>
    <input class="chi-input" type="text" id="example__inline-input02">
  </div>
</div>

Floating Label

Use floating labels to keep the placeholder visible when no label is attached to the input. Note: Chi only supports floating labels on -lg and -xl inputs.

Placeholder text

Web Component
HTML Blueprint

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<div class="chi-input__wrapper -floating-label">
  <input class="chi-input -lg" type="text" id="floating-label-lg">
  <label for="floating-label-lg">Placeholder text</label>
</div>

<div class="chi-input__wrapper -floating-label">
  <input class="chi-input -xl" type="text" id="floating-label-xl">
  <label for="floating-label-xl">Placeholder text</label>
</div>

<script>
  chi.floatingLabel(document.querySelectorAll('.-floating-label'));
</script>

Icons

Left Aligned

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__icon-left-aligned">Label</chi-label>
  <chi-text-input icon-left="search" icon-left-color="muted" value="Sample Text" id="example__icon-left-aligned"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-left-aligned">Label</label>
  <div class="chi-input__wrapper -icon--left">
    <input type="text" class="chi-input" value="Sample text" id="example__icon-left-aligned">
    <i class="chi-icon icon-search -icon--muted"></i>
    </div>
  </div>
</div>

Right Aligned

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__icon-right-aligned">Label</chi-label>
  <chi-text-input icon-right="search" icon-right-color="muted" value="Sample Text" id="example__icon-right-aligned"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-right-aligned">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <input type="text" class="chi-input" value="Sample text" id="example__icon-right-aligned">
    <i class="chi-icon icon-search -icon--muted"></i>
  </div>
</div>

Left + Right Aligned

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__icon-left-right-aligned">Label</chi-label>
  <chi-text-input icon-left="search" icon-left-color="muted" icon-right="check" icon-right-color="muted" value="Sample Text" id="example__icon-left-right-aligned"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-left-right-aligned">Label</label>
  <div class="chi-input__wrapper -icon--left -icon--right">
    <input type="text" class="chi-input" value="Sample text" id="example__icon-left-right-aligned">
    <i class="chi-icon icon-search -icon--muted"></i>
    <i class="chi-icon icon-check -icon--success"></i>
  </div>
</div>

Sizes

Text inputs supports the following sizes: -sm, -md, -lg, -xl. The default size is -md.

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__size-sm">Label</chi-label>
  <chi-text-input size="sm" id="example__size-sm"></chi-text-input>
</div>
<div class="chi-form__item">
  <chi-label for="example__size-md">Label</chi-label>
  <chi-text-input size="md" id="example__size-md"></chi-text-input>
</div>
<div class="chi-form__item">
  <chi-label for="example__size-lg">Label</chi-label>
  <chi-text-input size="lg" id="example__size-lg"></chi-text-input>
</div>
<div class="chi-form__item">
  <chi-label for="example__size-xl">Label</chi-label>
  <chi-text-input size="xl" id="example__size-xl"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__size-sm">Label</label>
  <input type="text" class="chi-input -sm" id="example__size-sm">
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__size-md">Label</label>
  <input type="text" class="chi-input -md" id="example__size-md">
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__size-lg">Label</label>
  <input type="text" class="chi-input -lg" id="example__size-lg">
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__size-xl">Label</label>
  <input type="text" class="chi-input -xl" id="example__size-xl">
</div>

Web Component

Properties

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	To disable Text input	`boolean`	`false`
`iconLeft`	`icon-left`	To add a left positioned icon	`string`	undefined
`iconLeftColor`	`icon-left-color`	To define color of left icon	`"danger" \| "grey" \| "info" \| "light" \| "muted" \| "navy" \| "orange" \| "primary" \| "secondary" \| "success" \| "warning"`	undefined
`iconRight`	`icon-right`	To add a right positioned icon	`string`	undefined
`iconRightColor`	`icon-right-color`	To define color of right icon	`"danger" \| "grey" \| "info" \| "light" \| "muted" \| "navy" \| "orange" \| "primary" \| "secondary" \| "success" \| "warning"`	undefined
`name`	`name`	To define name of Text input	`string`	undefined
`placeholder`	`placeholder`	To define placeholder of Text input	`string`	undefined
`preventValueMutation`	`prevent-value-mutation`	To disable Value attribute mutation	`boolean`	`false`
`readonly`	`readonly`	To prevent the Text input value from being changed	`boolean`	`false`
`size`	`size`	To define size of Text input	`"lg" \| "md" \| "sm" \| "xl"`	`'md'`
`spinner`	`spinner`	To render Text Input with Spinner	`boolean`	`false`
`state`	`state`	To define state color of Text input	`"danger" \| "success" \| "warning"`	undefined
`type`	`type`	To define type of Text input	`"date" \| "datetime" \| "datetime-local" \| "email" \| "month" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"`	`'text'`
`value`	`value`	To define value of Text input	`string`	`''`

Events

Event	Description	Type
`chiBlur`	Triggered when the element has lost focus.	`CustomEvent<any>`
`chiChange`	Triggered when an alteration to the element's value is committed by the user	`CustomEvent<string>`
`chiFocus`	Triggered when the user sets focus on the element.	`CustomEvent<any>`
`chiInput`	Triggered when the user changed the element's value but did not commit the change yet	`CustomEvent<string>`

Accessibility

Accessibility guidelines coming soon