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.