kanbanworkflowstimelinescrumrubyroadmapproject-planningproject-managementopenprojectangularissue-trackerifcgantt-chartganttbug-trackerboardsbcf
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
2.8 KiB
145 lines
2.8 KiB
# Forms
|
|
|
|
# Forms: Checkboxes
|
|
|
|
```
|
|
<label class="checkbox-label">
|
|
<input type="checkbox">
|
|
<div class="styled-checkbox"></div>
|
|
</label>
|
|
|
|
<br>
|
|
<br>
|
|
|
|
<label class="checkbox-label">
|
|
checkbox label
|
|
<input type="checkbox">
|
|
<div class="styled-checkbox"></div>
|
|
</label>
|
|
|
|
<br>
|
|
<br>
|
|
|
|
<label class="checkbox-label">
|
|
<input type="checkbox">
|
|
<div class="styled-checkbox"></div>
|
|
checkbox label
|
|
</label>
|
|
```
|
|
|
|
# Forms: Select
|
|
|
|
## Default Select
|
|
|
|
_with no class (uses default Foundation form styling)_
|
|
|
|
```
|
|
<select>
|
|
<option>one</option>
|
|
<option>two</option>
|
|
<option>three</option>
|
|
</select>
|
|
```
|
|
|
|
_with class applied_
|
|
|
|
```
|
|
<select class="form--select">
|
|
<option>one</option>
|
|
<option>two</option>
|
|
<option>three</option>
|
|
</select>
|
|
|
|
<select class="form--select" multiple>
|
|
<option>one</option>
|
|
<option>two</option>
|
|
<option>three</option>
|
|
</select>
|
|
```
|
|
|
|
## Default Select with Option Groups
|
|
|
|
```
|
|
<select class="form--select">
|
|
<optgroup label="group one">
|
|
<option>one dot one</option>
|
|
</optgroup>
|
|
<optgroup label="group two">
|
|
<option>two dot one</option>
|
|
<option>two dot two</option>
|
|
</optgroup>
|
|
</select>
|
|
```
|
|
|
|
## Select Sizes
|
|
|
|
```
|
|
<select class="form--select -tiny">
|
|
<option>one</option>
|
|
<option>two</option>
|
|
<option>three</option>
|
|
</select>
|
|
|
|
<select class="form--select -small">
|
|
<option>one</option>
|
|
<option>two</option>
|
|
<option>three</option>
|
|
</select>
|
|
|
|
<select class="form--select -large">
|
|
<option>one</option>
|
|
<option>two</option>
|
|
<option>three</option>
|
|
</select>
|
|
```
|
|
|
|
## Narrow select
|
|
|
|
_By default, a `form--select` will take the full width of its container element.
|
|
In most cases it is recommended to apply a width to the container element, but
|
|
in certain circumstances the `-narrow` variant may be preferable._
|
|
|
|
```
|
|
<select class="form--select -narrow">
|
|
<option>one</option>
|
|
<option>two</option>
|
|
<option>three</option>
|
|
</select>
|
|
|
|
<select class="form--select -small -narrow">
|
|
<option>one</option>
|
|
<option>two</option>
|
|
<option>three</option>
|
|
</select>
|
|
```
|
|
|
|
# Forms: Text fields
|
|
|
|
## Default text field
|
|
|
|
_with no class (uses default Foundation form styling)_
|
|
|
|
```
|
|
<label>Text:<input type="text"></label>
|
|
<label>Email:<input type="email" placeholder="a valid email"></label>
|
|
<label>Number:<input type="number"></label>
|
|
```
|
|
|
|
_with class applied_
|
|
|
|
|
|
```
|
|
<label>Text:<input type="text" class="form--text-field"></label>
|
|
<label>Email:<input type="email" class="form--text-field" placeholder="a valid email"></label>
|
|
<label>Number:<input type="number" class="form--text-field"></label>
|
|
```
|
|
|
|
## Text field sizes
|
|
|
|
```
|
|
<label>Tiny:<input type="text" class="form--text-field -tiny" value="a tiny value"></label>
|
|
|
|
<label>Small:<input type="text" class="form--text-field -small" value="a small value"></label>
|
|
|
|
<label>Large:<input type="text" class="form--text-field -large" value="a large value"></label>
|
|
```
|
|
|