Input
Input shortcode arguments
| Classes |
| ||||||||||
id | ID of the input. | ||||||||||
type | Input type (default: "text"). | ||||||||||
name | Name of the input. | ||||||||||
placeholder | Input placeholder text. | ||||||||||
value | Input value. | ||||||||||
icon | Name of the icon to use. | ||||||||||
label | Label text. | ||||||||||
required | Set to "true" to mark as required field. |
Checkbox shortcode arguments
id | ID of the checkbox. | ||
name | Name of the checkbox. | ||
label | Label text. | ||
value | Checkbox value (for radio checkboxes). | ||
| Classes |
| ||
required | Set to "true" to mark as required field. | ||
autofor | Set to "false" to prevent automatically adding "for" attribute to the label. |
Select shortcode arguments
id | ID of the select. | ||||
name | Name of the select. | ||||
| Classes |
| ||||
required | Set to "true" to mark as required field. |
Option shortcode arguments
value | Option value. | ||
| Classes |
|
Textarea shortcode arguments
id | ID of the textarea. |
name | Name of the textarea. |
rows | Textarea rows count. |
required | Set 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>Clearable select
<select clearable>
<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.