GoComponents

# Input

An input lets users enter or edit information as part of a form process.

# Default

<label class="goco-c-input-label" for="input-default">Input label</label>
<div class="goco-c-input">
  <input class="goco-c-input__native" type="text" id="input-default" placeholder="Placeholder text" />
</div>

# Dark

<label class="goco-c-input-label" for="input-dark">Input label</label>
<div class="goco-c-input goco-c-input--dark">
  <input class="goco-c-input__native" type="text" id="input-dark" placeholder="Placeholder text" />
</div>

# Disabled

<label class="goco-c-input-label" for="input">Input label</label>
<div class="goco-c-input goco-c-input--disabled">
  <input class="goco-c-input__native" type="text" id="input" placeholder="Placeholder text" disabled />
</div>

# Faux Disabled

Retains the interactivity of the element whilst inheriting the disabled styles.

<label class="goco-c-input-label" for="input">Input label</label>
<div class="goco-c-input goco-c-input--faux-disabled">
  <input class="goco-c-input__native" type="text" id="input" placeholder="Placeholder text" />
</div>

# Sizes

There is an additional size of the input available, small.

# Small

<label class="goco-c-input-label" for="input-small">Input label</label>
<div class="goco-c-input goco-c-input--small">
  <input class="goco-c-input__native" type="text" id="input-small" placeholder="Placeholder text" />
</div>

# Prefixes and Suffixes

Add prefix or suffix text inside the input.

# Prefix

<label class="goco-c-input-label" for="input-prefix">Input label</label>
<div class="goco-c-input goco-c-input--has-prefix">
  <div class="goco-c-input__affix goco-c-input__affix--prefix">£</div>
  <input class="goco-c-input__native" type="text" id="input-prefix" placeholder="Placeholder text" />
</div>

# Suffix

<label class="goco-c-input-label" for="input-suffix">Input label</label>
<div class="goco-c-input goco-c-input--has-suffix">
  <input class="goco-c-input__native" type="text" id="input-suffix" placeholder="Placeholder text" />
  <div class="goco-c-input__affix goco-c-input__affix--suffix">Kwh</div>
</div>

# With Icon

Add an icon inside the input.

# Left Icon

<label class="goco-c-input-label" for="input-icon-left">Input label</label>
<div class="goco-c-input goco-c-input--has-icon-left">
  <svg class="goco-c-input__icon goco-c-input__icon--left" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
    <path fill="currentColor" d="M19.71 18.29l-5.4-5.4a8 8 0 10-1.41 1.41l5.4 5.4a1 1 0 001.41-1.41zM2 8a6 6 0 116 6 6 6 0 01-6-6z" />
  </svg>
  <input class="goco-c-input__native" type="text" id="input-icon-left" placeholder="Placeholder text" />
</div>

# Right Icon

<label class="goco-c-input-label" for="input-icon-right">Input label</label>
<div class="goco-c-input goco-c-input--has-icon-right">
  <input class="goco-c-input__native" type="text" id="input-icon-right" placeholder="Placeholder text" />
  <svg class="goco-c-input__icon goco-c-input__icon--right" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
    <path fill="currentColor" d="M19.71 18.29l-5.4-5.4a8 8 0 10-1.41 1.41l5.4 5.4a1 1 0 001.41-1.41zM2 8a6 6 0 116 6 6 6 0 01-6-6z" />
  </svg>
</div>

← Select →