We've updated our documenation to align with our other frameworks. Our new documenation will
live here and these pages will be removed.
Fields
Fields allow users to enter text information. They come in two styles, inline and text area. Buttons and icons can be added to both field styles.
Field
Inline fields can be implemented by wrapping an <input> tag in a <div> tag with the .input class. Add a hint label to fields by inserting the placeholder attribute in the <input> tag.
<divclass="input"><inputclass=""type="text"placeholder="Just a field"/></div>
Textarea
Text area fields can be implemented by wrapping a <textarea> tag in a <div> tag with the .input class. Add a hint label to text area fields by inserting the placeholder attribute in the <textarea> tag.
Inline fields are available in default, medium, and small sizes. The default field size is automatically built into our .input class. However, you may implement smaller sizes by adding the .is-medium or .is-small classes to a field's outer <div>tag.
<divclass="input"><inputtype="text"placeholder="Just a field"/></div><br><divclass="input is-medium"><inputtype="text"placeholder="Just a field"/></div><br><divclass="input is-small"><inputtype="text"placeholder="Just a field"/></div>
States
Inline fields and text area fields have .is-active,.is-error, and disabled states. Active and warning states can be forced by adding the corresponding state class to a field's outer <div>tag. To add an error message to .is-error fields, wrap text in a <p> tag with the .message class and insert it within the field's<input> tag. To implement a disabled state, add the disabled attribute to a field's<input> tag.
<divclass="input"><inputtype="text"placeholder="Just a field"/></div><br><divclass="input is-error"><inputtype="text"placeholder="Just a field"/><pclass="message">with an error</p></div><br><divclass="input"><inputtype="text"placeholder="Just a field"disabled=""/></div>
Type Attributes
Email, number and password fields can be implemented by adding the type attribute to a field’s <input> tag and setting the value to email, number, or password.
To insert an icon into a field add a <span> tag with the .d-icon and .d-$icon-name classes before or after the <input> tag. You can also customize icon color using the .is-$color-$value class.
Front
Position an icon at the front of a field by adding the .has-icon-front class to a field's <div> tag.