Inputs and textareas require a wrapping field-group container element so that the labels and error messages can be formatted properly.
Inputs can also have a classic styling, as you'll see below.
This is an example of a classic input.
You won't see this because there is no error
<div class="field-group ">
<input
name="my-input-1"
type="text"
class="field-group__input "
required
placeholder="Cool Input"/>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You won't see this because there is no error</p>
</div>
Material Style field groups are a little fancier and include a bottom border and embedded label that animates on focus.
You won't see this because there is no error
<div class="field-group field-group--is-material ">
<input
name="my-input-1"
type="text"
class="field-group__input "
required
placeholder=""/>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You won't see this because there is no error</p>
</div>
You won't see this because there is no error
<div class="field-group ">
<textarea
name="my-input-1"
type="text"
class="field-group__textarea "
required
placeholder="Cool Input"/>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You won't see this because there is no error</p>
</div>
You won't see this because there is no error
<div class="field-group field-group--is-material ">
<textarea
name="my-input-1"
type="text"
class="field-group__textarea "
required
placeholder=""/>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You won't see this because there is no error</p>
</div>
You won't see this because there is no error
<div class="field-group ">
<select
name="my-input-1"
type="text"
class="field-group__select "
required
placeholder="Cool Input">
<option disabled selected value>-- Select an Option --</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You won't see this because there is no error</p>
</div>
You won't see this because there is no error
<div class="field-group field-group--is-material ">
<select
name="my-input-1"
type="text"
class="field-group__select "
required
placeholder="">
<option disabled selected value>-- Select an Option --</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You won't see this because there is no error</p>
</div>
Error handling requires the use of the field-group--is-error class.
You'll only see this when there's an error
<div class="field-group field-group--is- field-group--is-error ">
<input
name="my-input-1"
type="text"
class="field-group__input "
required
placeholder="Cool placeholder"/>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You'll only see this when there's an error</p>
</div>
You'll only see this when there's an error
<div class="field-group field-group--is-material field-group--is-error ">
<input
name="my-input-1"
type="text"
class="field-group__input "
required
placeholder=""/>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You'll only see this when there's an error</p>
</div>
Disabled handling requires the use of the field-group--is-disabled class.
You won't see this because there is no error
<div class="field-group field-group--is- field-group--is-disabled">
<input
name="my-input-1"
type="text"
class="field-group__input "
required
disabled
placeholder="Cool placeholder"/>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You won't see this because there is no error</p>
</div>
You won't see this because there is no error
<div class="field-group field-group--is-material field-group--is-disabled">
<input
name="my-input-1"
type="text"
class="field-group__input "
required
disabled
placeholder=""/>
<label class="field-group__label" for="my-input-1">Input Label</label>
<p class="field-group__error-msg copy">You won't see this because there is no error</p>
</div>