Inputs

Input fields make it possible to fill information.

c-input

Types

text

password

tel

url

email

search

number

date

datetime-local

month

time

week

States

Empty

Filled

Placeholder

Invalid

Browser validation using :invalid pseudo-class.

Custom validation using .is-invalid class.

Disabled

Sizes

Small

c-input c-input--s

Medium

c-input

Large

c-input c-input--l

Naked

Display the input without box effect (no padding and border) and remove focus.

c-input c-input--naked

Input with prefix / suffix

Elements can be added at the start and/or end of the input using prefix and suffix child components. In this case you need to apply the c-input class to a wrapper <div> and then add a child <input> with the c-input--naked variant.

<div class="c-input">
  <div class="c-input__prefix">…</div>
  <input class="c-input c-input--naked" type="text" placeholder="" value="">
  <div class="c-input__suffix">…</div>
</div>

Shifted

In some cases like icons or avatars you want the prefix to align properly with the pill style of the input. The c-input__prefix--shift will adjust the prefix element position for that.

With shift variant

Without shift variant

Examples

2¢ / message

Input tags

This input is using one or multiple tags as entries. Checkout the typeahead pattern to build an autocomplete input.