Text Input
Examples
To render a text input, apply the class chi-input
to an input type="text"
,
input type="password"
, input type="email"
, etc.
Base
<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
<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.
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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>
<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
<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>
<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
<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>
<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
.
<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.
<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>