Input - With button

<label class="c-label" for="id">Label</label>
<div class="u-flex u-border">
<input type="text" class="c-input c-input--with-button" name="name" placeholder="Placeholder" id="id" required />
<button type="button" class="mp c-button--white">Search</button>
"label": "Label",
"name": "name",
"id": "id",
"type": "text",
"placeholder": "Placeholder",
"required": true,
"button": true,
"buttontext": "Search"


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