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
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 *