Chap WordPress theme
Chap

Input

[input] shortcode arguments
id:
ID of the input.
type:
Input type (default: "text").
name:
Name of the input.
placeholder:
Input placeholder text.
value:
Input value.
classes:
Size -
[mini|small|medium|large|big|huge|massive]
Label -
[labeled|right labeled|corner labeled|left corner labeled]
Icon -
[icon|left icon]
Action -
[action|left action]
Other -
[styled|inverted|transparent|fluid|loading|focus|disabled|error]
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:
State -
[checked|disabled]
required:
Set to "true" to mark as required field.
[select] shortcode arguments
id:
ID of the select.
name:
Name of the select.
classes:
Type -
[multiple]
State -
[disabled]
required:
Set to "true" to mark as required field.
[option] shortcode arguments
value:
Option value.
classes:
State -
[selected]
[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


[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.