Form

Kriyā includes a comprehensive list of common form controls:

  • .input
  • .select and .select-multiple
  • .textarea
  • .checkbox, .radio and .switch

You'll need to wrap each control in a .control container. Plus, if your form has multiple fields then you'll need to wrap your control in a .field container to get the necessary spacing and formatting.

Optionally add some helper text

<div class="field">
	<label class="label">Name</label>
	<p class="control">
		<input type="text" name="name" placeholder="e.g. John Smith" class="input">
	</p>
	<p class="help">Optionally add some helper text</p>
</div>

<div class="field">
	<label class="label">Select</label>
	<p class="control">
		<span class="select">
			<select name="title">
				<option selected>Mr.</option>
				<option>Mrs.</option>
				<option>Miss.</option>
				...
			</select>
		</span>
	</p>
</div>

<div class="field">
	<label class="label">Select Multiple</label>
	<p class="control">
		<span class="select-multiple">
			<select multiple name="fruits">
				<option selected>Apples</option>
				<option>Bananas</option>
				<option>Blackberries</option>
				...
			</select>
		</span>
	</p>
</div>

Colours

Form elements are available in multiple colours. Just add a colour modifier like is-success.

Please enter a valid email address

That username is available

<div class="field">
	<label class="label">Email</label>
	<p class="control">
		<input type="email" name="email" value="uygyutf" class="input is-danger">
	</p>
	<p class="help is-danger">Please enter a valid email address</p>
</div>

<div class="field">
	<label class="label">Username</label>
	<p class="control">
		<input type="text" name="username" placeholder="kriya" class="input is-success">
	</p>
	<p class="help is-success">That username is available</p>
</div>

Readonly & Disabled

Use the readonly or disabled HTML attributes, or the .is-disabled class.

This field is read only

This field is disabled

<div class="field">
	<label class="label">Name</label>
	<p class="control">
		<input type="text" name="name" value="John Smith" class="input" readonly>
	</p>
	<p class="help">This field is read only</p>
</div>

<div class="field">
	<label class="label">Name</label>
	<p class="control">
		<input type="text" name="name" value="John Smith" class="input" disabled>
	</p>
	<p class="help">This field is disabled</p>
</div>

<div class="field">
	<label class="label">Title</label>
	<p class="control">
		<div class="select is-disabled">
			<select name="title" disabled>
				<option>Mr.</option>
			</select>
		</div>
	</p>
</div>

Textarea

<div class="field">
	<label class="label">Message</label>
	<p class="control">
		<textarea name="message" placeholder="Tell us what you think" class="textarea"></textarea>
	</p>
</div>

Checkboxes, Radios & Switches

Favourite fruits

<div class="field">
	<p class="control">
		<label class="checkbox">
			<input type="checkbox" name="terms"> I agree to the <a href="" rel="licence">terms and conditions</a>
		</label>
	</p>
</div>

<div class="field">
	<p class="control">
		<label class="radio">
			<input type="radio" name="question" value="1"> Yes
		</label>
		<label class="radio">
			<input type="radio" name="question" value="0"> No
		</label>
	</p>
</div>

<div class="field">
	<p class="control">
		<label class="switch">
			<input type="checkbox">
			<span class="switch-lever"></span>
			<span class="switch-label">Send me notifications</span>
		</label>
	</p>
</div>

<div class="field">
	<h6 class="label">Favourite fruits</h6>
	<p class="control">
		<label class="switch" for="apples">
			<input type="checkbox" name="notifications" id="apples" value="1">
			<span class="switch-lever"></span>
			<span class="switch-label">Apples</span>
		</label>
		<label class="switch" for="oranges">
			<input type="checkbox" name="notifications" id="oranges" value="1">
			<span class="switch-lever"></span>
			<span class="switch-label">Oranges</span>
		</label>
		<label class="switch" for="pears">
			<input type="checkbox" name="notifications" id="pears" value="1">
			<span class="switch-lever"></span>
			<span class="switch-label">Pears</span>
		</label>
	</p>
</div>

Add-ons

You can add or concatenate controls together. Use the has-addons modifier on the control container. Only works with inputs, buttons and selects. Use the has-addons-centered modifier to center your controls horizontally.

<div class="field has-addons">
	<p class="control">
		<label class="is-hidden">Employees</label>
		<span class="select">
			<select name="employees">
				<option selected>1-10</option>
				<option>10-100</option>
				<option>100-1000</option>
				<option>1000+</option>
			</select>
		</span>
	</p>
	<p class="control">
		<button type="submit" class="button is-primary">View</button>
	</p>
</div>

If you want your add-on controls to be the full width of your container then use the is-expanded modifier on the element you want to fill any remaining space.

<div class="field has-addons">
  <p class="control">
  	<label class="is-hidden">Currency</label>
    <span class="select">
      <select>
        <option selected>£</option>
        <option>$</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control is-expanded">
    <input class="input" type="number" placeholder="0">
  </p>
  <p class="control">
    <button class="button">Donate</button>
  </p>
</div>

Note that if you want a full width select dropdown, you'll need to pair control is-expanded with select is-fullwidth.

<div class="field has-addons">
    <p class="control is-expanded">
        <span class="select is-fullwidth">
            <select name="country">
                <option selected>Apples</option>
                <option>Bananas</option>
                <option>Blackberries</option>
                ...
            </select>
        </span>
    </p>
    <p class="control">
        <button type="submit" class="button is-primary">Choose</button>
    </p>
</div>