Field & labels

Floating labels by default, shared 48px single-line height, native inputs and validation.

Basic structure

<!-- Floating: control first, then label -->
<div class="field">
  <input class="input" id="name" placeholder=" ">
  <label class="label" for="name">Name</label>
</div>
<!-- External: is-static, label first -->
<div class="field is-static">
  <label class="label" for="external-name">Name</label>
  <input class="input" id="external-name">
</div>

Try it Label styleSize

HTML

<form class="content" data-validate>
  <div class="field"><input class="input" id="example-name" name="name" placeholder=" " autocomplete="name"><label class="label" for="example-name">Name</label></div>
  <div class="field"><input class="input" id="example-email" name="email" type="email" placeholder=" " required><label class="label" for="example-email">Email</label></div>
  <div class="field"><select class="select" id="example-project" name="project"><option value="">Choose project type</option><option value="illustration">Illustration</option><option value="page">Page design</option></select><label class="label" for="example-project">Project type</label></div>
  <div class="field"><textarea class="textarea" id="example-message" name="message" placeholder=" "></textarea><label class="label" for="example-message">Message</label></div>
  <button class="button is-primary" type="submit">Validate example</button><p class="help" role="status" data-form-status></p>
</form>

Options

Class or attribute	What it does
`is-static`	External label, before the control.
`input/textarea/select.is-small/is-large`	Explicit control size variations.
`is-grouped / has-addons`	Grouped fields or an attached action.
`control.has-icon`	Icon beside an input.
`type=search`	Animated clear action when enhanced.
`help + aria-describedby`	Associate supporting/error text with the control.
`required / disabled / readonly / aria-invalid`	Native validity and state attributes.
`form[data-validate]`	Invalid-state enhancement, no submission provider.