Menu

Input - With button

Open fullscreen 
<div>
  <div class="c-input__wrap">
    <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>
    </div>
  </div>
</div>
{
  "label": "Label",
  "name": "name",
  "id": "id",
  "type": "text",
  "placeholder": "Placeholder",
  "required": true,
  "button": true,
  "buttontext": "Search"
}

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