Menu

Input - With error message

<div class="c-input-error">
<div class="c-input__wrap">
<label class="c-label" for="id">Label</label>
<input type="text" class="c-input " name="name" placeholder="Placeholder" id="id" required />
</div>
<div class="c-input-message">This field is required</div>
</div>
{
"label": "Label",
"name": "name",
"id": "id",
"type": "text",
"placeholder": "Placeholder",
"required": true,
"error": "This field is required"
}

Props

Name Type Description
label string
id string ID attribute
name string Name attribute (falls back to ID)
type string Defaults to text
placeholder string
required bool

CSS modifiers

Name Description
c-input--alt Petrol step 3 alternative background
c-input--large Taller input
c-input--select Add dropdown arrow
c-input--textarea Prevent horizontal resizing