pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

various input styles

Browse Source
This commit is contained in:
Andrew Croce
2018-07-24 17:20:38 -04:00
parent 51ed8c2169
commit 8ea1fd6565
5 changed files with 244 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
templates/styleguide.html.to
View File

@@ -127,6 +127,133 @@
<div class='col col--grow'>col 11</div>
<div class='col col--grow'>col 12</div>
</div>
<form>
<div class='usa-input'>
<label for='basic-text-1'>
Basic Text Input
<span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out.
</span>
</label>
<input id='basic-text-1' type='text' placeholder='this is a sample of what you should enter'/>
</div>
<div class='usa-input usa-input--error'>
<label for='basic-text'>
Erroneous Text Input
<span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out.
</span>
{% module Icon('alert') %}
</label>
<input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-invalid='true' aria-describedby='basic-text-2__errors'/>
<span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
</div>
<div class='usa-input usa-input--warning'>
<label for='basic-text'>
Warning Text Input
<span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out.
</span>
{% module Icon('alert') %}
</label>
<input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-describedby='basic-text-2__errors'/>
<span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
</div>
<div class='usa-input'>
<label for='basic-text'>
Basic Text Input with a really long label that wraps and wraps and wraps and should really be separated into a label + help text
</label>
<textarea placeholder='this is a sample of what you should enter'/></textarea>
</div>
<div class='usa-input'>
<label for='selects'>Select Menu</label>
<select name='selects'>
<option selected disabled>Select an option</option>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
<option value='4'>Four</option>
<option value='5'>Five</option>
</select>
</div>
<div class='row row--form'>
<div class='col col--pad col--grow'>
<div class='usa-input'>
<fieldset class='usa-input__choices'>
<legend>Checkboxes</legend>
<input type='checkbox' id='checkbox-1' checked/>
<label for='checkbox-1'>Checkbox One</label>
<input type='checkbox' id='checkbox-2' />
<label for='checkbox-2'>Checkbox Two</label>
<input type='checkbox' id='checkbox-3' disabled />
<label for='checkbox-3'>Checkbox Three</label>
</fieldset>
</div>
</div>
<div class='col col--pad col--grow'>
<div class='usa-input'>
<fieldset class='usa-input__choices usa-input__choices--inline'>
<legend>Inline Checkboxes</legend>
<input type='checkbox' id='checkbox-4' checked/>
<label for='checkbox-4'>Checkbox Four</label>
<input type='checkbox' id='checkbox-5' />
<label for='checkbox-5'>Checkbox Five</label>
<input type='checkbox' id='checkbox-6' disabled />
<label for='checkbox-6'>Checkbox Six</label>
</fieldset>
</div>
</div>
</div>
<div class='row row--form'>
<div class='col col--grow col--pad'>
<div class='usa-input'>
<fieldset class='usa-input__choices'>
<legend>Radio Buttons</legend>
<input type='radio' name='radio' id='radio-1' />
<label for='radio-1'>Radio One</label>
<input type='radio' name='radio' id='radio-2' />
<label for='radio-2'>Radio Two</label>
<input type='radio' name='radio' id='radio-3' />
<label for='radio-3'>Radio Three</label>
</fieldset>
</div>
</div>
<div class='col col--grow col--pad'>
<div class='usa-input'>
<fieldset class='usa-input__choices usa-input__choices--inline'>
<legend>Radio Buttons</legend>
<input type='radio' name='radio-2' id='radio-4' />
<label for='radio-4'>Radio Four</label>
<input type='radio' name='radio-2' id='radio-5' />
<label for='radio-5'>Radio Five</label>
<input type='radio' name='radio-2' id='radio-6' />
<label for='radio-6'>Radio Six</label>
</fieldset>
</div>
</div>
</div>
</form>
</div>
</div>