<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>Input - With error message
{
"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 |