Input shortcode arguments
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).
Statechecked disabled
requiredSet to "true" to mark as required field.
autoforSet to "false" to prevent automatically adding "for" attribute to the label.
Select shortcode arguments
idID of the select.
nameName of the select.
requiredSet to "true" to mark as required field.
Option shortcode arguments
valueOption value.
Textarea shortcode arguments
idID of the textarea.
nameName of the textarea.
rowsTextarea rows count.
requiredSet to "true" to mark as required field.

[input type="text" placeholder="Search..."]
[input styled placeholder="Search..."]
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

[input labeled placeholder="" 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 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"]
  [option value="male"]Male[/option]
  [option value="female"]Female[/option]
Clearable select
[select clearable]
  [option value="male"]Male[/option]
  [option value="female"]Female[/option]
Multiple select
[select multiple fluid]
  [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]
Disabled select
[select disabled]
  [option]Select your prize[/option]
Required input
  [field five wide required label="Specified as an attribute"]
    [input placeholder="Last name" required="true"]
  [field five wide required label="Specified as a class"]
    [input required placeholder="First name"]
  [button style="submit"]Submit[/button]
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.
  [field eight wide label="Textarea"]
    [textarea]Text area[/textarea]
  [field six wide label="Small textarea"]
    [textarea rows="2"]Text area[/textarea]
Textareas are only styled inside forms.
Exit mobile version