Input

Input shortcode arguments
Classes
Sizemini small medium large big huge massive
Labellabeled right labeled corner labeled left corner labeled
Iconicon left icon
Actionaction left action
Otherstyled inverted transparent fluid loading focus disabled error
idID of the input.
typeInput type (default: "text").
nameName of the input.
placeholderInput placeholder text.
valueInput value.
iconName of the icon to use.
labelLabel text.
requiredSet to "true" to mark as required field.
Checkbox shortcode arguments
idID of the checkbox.
nameName of the checkbox.
labelLabel text.
valueCheckbox value (for radio checkboxes).
Classes
Statechecked disabled
requiredSet to "true" to mark as required field.
Select shortcode arguments
idID of the select.
nameName of the select.
Classes
Typemultiple
Statedisabled
requiredSet to "true" to mark as required field.
Option shortcode arguments
valueOption value.
Classes
Stateselected
Textarea shortcode arguments
idID of the textarea.
nameName of the textarea.
rowsTextarea rows count.
requiredSet to "true" to mark as required field.
Input


<input type="text" placeholder="Search...">
<input styled placeholder="Search...">
Notes
Input without any classes will result in a default HTML input that is not styled outside of forms. If you need to use it outside of forms without any classes, add a styled class.
Icon input


<input mini icon placeholder="Search..." icon="search">
<input mini left icon placeholder="Search..." icon="search">
Labeled input
http://


.com
<input labeled placeholder="mysite.com" label="http://">
<input right labeled placeholder="http://mysite" label=".com">
Action input


<input action value="term"><button>Search</button></input>
<input mini left action><button teal labeled icon icon="cart">Checkout</button></input>
Checkbox


<checkbox label="Checkbox">
<checkbox label="Checked" checked>
<checkbox label="Disabled" disabled>
Slider checkbox


<checkbox slider label="Checkbox">
<checkbox slider label="Checked" checked>
Toggle checkbox


<checkbox toggle label="Checkbox">
<checkbox toggle label="Checked" checked>
Radio checkbox


<checkbox radio name="color" label="Red">
<checkbox radio name="color" label="Green" checked>
<checkbox radio name="color" label="Blue">
Select
<select>
  <option>Gender</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>
Multiple select
<select multiple fluid>
  <option>Colors</option>
  <option value="white">White</option>
  <option value="black">Black</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
Disabled select
<select disabled>
  <option>Select your prize</option>
</select>
Required input
<form>
  <field five wide required label="Specified as an attribute">
    <input placeholder="Last name" required="true">
  </field>
  <field five wide required label="Specified as a class">
    <input required placeholder="First name">
  </field>
  <button style="submit">Submit</button>
</form>
Notes
Field can be marked as required by adding the required="true" attribute. Alternatively, adding the required class also works, but then the element's wrapper will also receive the class name.
Adding required class to a field outputs a red asterisk after the label.
Textarea
<form>
  <field eight wide label="Textarea">
    <textarea>Text area</textarea>
  </field>
  <field six wide label="Small textarea">
    <textarea rows="2">Text area</textarea>
  </field>
</form>
Notes
Textareas are only styled inside forms.

One response to “Input

Leave a comment

Your email address will not be published. Required fields are marked *