Text input

Text inputs are used for inputting single line text data.

Examples

To render a text input, apply the class chi-input to an input type="text", input type="password", input type="email", etc.

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" placeholder="Placeholder"></chi-text-input>
</div>

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

Disabled

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__disabled">Label</chi-label>
  <chi-text-input id="example__disabled" placeholder="Placeholder" 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" value="Sample Text" id="example__disabled" disabled>
</div>

Invalid

Text inputs support Chi's semantic class modifier -danger for indicating an invalid input.

Label

This is an invalid label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__danger">Label</chi-label>
  <chi-text-input id="example__danger" state="danger" icon-right="circle-warning" icon-right-color="danger" value="Sample Text"></chi-text-input>
  <div class="chi-label -status -danger">This is an invalid label</div>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__danger">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <input type="text" class="chi-input -danger" value="Sample Text" id="example__danger">
    <i class="chi-icon icon-circle-warning -icon--danger"></i>
  </div>
  <div class="chi-label -status -danger">This is an invalid label</div>
</div>

Label with icon

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>
    <chi-icon icon="circle-info-outline" color="muted"></chi-icon>
  </div>
  <chi-text-input id="example__label-with-icon" placeholder="Placeholder"></chi-text-input>
</div>

<div class="chi-form__item">
  <div class="chi-label__wrapper">
    <label class="chi-label" for="example__label-with-icon">Label</label>
    <i class="chi-icon icon-circle-info-outline -icon--muted"></i>
  </div>
  <input class="chi-input" id="example__label-with-icon" type="text" placeholder="Placeholder">
</div>

Inline Label

Label

Web Component
HTML Blueprint

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

<div class="chi-form__item -row">
  <label class="chi-label -mr--2" for="example__inline-label">Label</label>
  <input class="chi-input" type="text" id="example__inline-label" placeholder="Placeholder">
</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" placeholder="Placeholder"></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" placeholder="Placeholder">
  </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>
  <div class="chi-col -w--9">
    <chi-text-input id="example__inline-label-grid" placeholder="Placeholder"></chi-text-input>
  </div>
</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>
  <div class="chi-col -w--9">
    <input class="chi-input" type="text" id="example__inline-label-grid" placeholder="Placeholder">
  </div>
</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" placeholder="Placeholder"></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" placeholder="Placeholder"></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" placeholder="Placeholder">
  </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" placeholder="Placeholder">
  </div>
</div>

Icons

To add icons to a text input, wrap the input in a div using the class chi-input__wrapper. Next, add the icon as a sibling of the input and utilize an icon alignment utility class (e.g. -icon--left) to specify where it should be placed.

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" placeholder="Placeholder" 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" placeholder="Placeholder" 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" placeholder="Placeholder" 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" placeholder="Placeholder" 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" placeholder="Placeholder" 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" placeholder="Placeholder" 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>

States

Text inputs offer three validation states: -success, -warning, and -danger.

Success

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__state-success">Label</chi-label>
  <chi-text-input state="success" placeholder="Placeholder" value="Sample Text" id="example__state-success"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__state-success">Label</label>
  <input type="text" class="chi-input -success" placeholder="Placeholder" value="Sample Text" id="example__state-success">
</div>

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__state-success-with-icon">Label</chi-label>
  <chi-text-input state="success" icon-right="check" icon-right-color="success" placeholder="Placeholder" value="Sample Text" id="example__state-success-with-icon"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__state-success-with-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <input type="text" class="chi-input -success" placeholder="Placeholder" value="Sample Text" id="example__state-success-with-icon">
    <i class="chi-icon icon-check -icon--success"></i>
  </div>
</div>

Warning

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__state-warning">Label</chi-label>
  <chi-text-input state="warning" placeholder="Placeholder" value="Sample Text" id="example__state-warning"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__state-warning">Label</label>
  <input type="text" class="chi-input -warning" placeholder="Placeholder" value="Sample Text" id="example__state-warning">
</div>

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__state-warning-with-icon">Label</chi-label>
  <chi-text-input state="warning" icon-right="warning" icon-right-color="warning" placeholder="Placeholder" value="Sample Text" id="example__state-warning-with-icon"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__state-warning-with-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <input type="text" class="chi-input -warning" placeholder="Placeholder" value="Sample Text" id="example__state-warning-with-icon">
    <i class="chi-icon icon-warning -icon--warning"></i>
  </div>
</div>

Danger

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__state-danger">Label</chi-label>
  <chi-text-input state="danger" placeholder="Placeholder" value="Sample Text" id="example__state-danger"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__state-danger">Label</label>
  <input type="text" class="chi-input -danger" placeholder="Placeholder" value="Sample Text" id="example__state-danger">
</div>

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-label for="example__state-danger-with-icon">Label</chi-label>
  <chi-text-input state="danger" icon-right="circle-warning" icon-right-color="danger" placeholder="Placeholder" value="Sample Text" id="example__state-danger-with-icon"></chi-text-input>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__state-danger-with-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <input type="text" class="chi-input -danger" placeholder="Placeholder" value="Sample Text" id="example__state-danger-with-icon">
    <i class="chi-icon icon-circle-warning -icon--danger"></i>
  </div>
</div>

Sizes

Text inputs supports a full spectrum of 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" placeholder="Sample Text" 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" placeholder="Sample Text" 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" placeholder="Sample Text" 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" placeholder="Sample Text" 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" placeholder="Sample Text" 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" placeholder="Sample Text" 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" placeholder="Sample Text" 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" placeholder="Sample Text" id="example__size-xl">
</div>

Floating labels

Floating labels are a solution to keep the placeholder visible when no label is attached to the input. 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>

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" \| "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" \| "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`
`size`	`size`	To define size of Text input	`"lg" \| "md" \| "sm" \| "xl"`	`'md'`
`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