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

Error states for checkboxes/radios

Browse Source
This commit is contained in:
Andrew Croce 2018-07-25 10:30:21 -04:00
parent fbec69f110
commit 1be22b2c47
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scss/elements/_inputs.scss
View File

@ -45,7 +45,13 @@
fieldset { fieldset {
input[type='radio'] { input[type='radio'] {
+ label::before { + label::before {
box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px $color-red; box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-red;
}
}
input[type='checkbox'] {
+ label::before {
box-shadow: 0 0 0 2px $color-red;
} }
} }
} }
@ -103,6 +109,10 @@
margin: 0; margin: 0;
} }
.usa-input__message {
display: block;
}
&.usa-input__choices--inline { &.usa-input__choices--inline {
label { label {
display: inline-block; display: inline-block;

4
templates/styleguide.html.to
View File

@ -212,7 +212,7 @@
</div> </div>
<div class='form-col'> <div class='form-col'>
<div class='usa-input'> <div class='usa-input usa-input--error'>
<fieldset class='usa-input__choices usa-input__choices--inline'> <fieldset class='usa-input__choices usa-input__choices--inline'>
<legend>Inline Checkboxes</legend> <legend>Inline Checkboxes</legend>
<input type='checkbox' id='checkbox-4' checked/> <input type='checkbox' id='checkbox-4' checked/>
@ -223,6 +223,8 @@
<input type='checkbox' id='checkbox-6' disabled /> <input type='checkbox' id='checkbox-6' disabled />
<label for='checkbox-6'>Checkbox Six</label> <label for='checkbox-6'>Checkbox Six</label>
<span class='usa-input__message'>This is an error</span>
</fieldset> </fieldset>
</div> </div>
</div> </div>