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
<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
<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
<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
<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
<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%
<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
<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
Label
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
Label
Label
Label
<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.

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