updated README.md with checkbox field options
This commit is contained in:
36
README.md
36
README.md
@ -80,26 +80,30 @@ state.
|
|||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Checkbox and Radio Fields
|
### Checkbox and Radio Fields {#checkbox-and-radio-fields}
|
||||||
|
|
||||||
- Wrap all options in a `<fieldset>` element and add the `form-group` class to
|
- Wrap all options in a `<fieldset>` element and add the `form-group` class to
|
||||||
it instead of the individual options.
|
it instead of the individual options.
|
||||||
- The `<legend>` tag may be used to give the option set a heading.
|
- The `<legend>` tag may be used to give the option set a heading.
|
||||||
- Each `checkbox` or `radio` `<input>` type should be wrapped in a
|
- [Field Options](#field-options) are shared amongst all inputs in a check or
|
||||||
`form-group__item` class. This class is not used programattically, and is only
|
radio group. Your options only need to be applied to one of the inputs in the
|
||||||
used for styling.
|
group that shares a `name` attribute.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<legend>Check Group</legend>
|
<legend>Check Group</legend>
|
||||||
<span class="form-group__item">
|
<span class="form-group__item">
|
||||||
<input id="checkbox-1" type="checkbox" name="checks">
|
<input data-validation='{"minChecks": 2, "optional": true}' id="checkbox-1" type="checkbox" name="checks">
|
||||||
<label for="checkbox-1">Checkbox 1</label>
|
<label for="checkbox-1">Checkbox 1</label>
|
||||||
</span>
|
</span>
|
||||||
<span class="form-group__item">
|
<span class="form-group__item">
|
||||||
<input id="checkbox-2" type="checkbox" name="checks">
|
<input id="checkbox-2" type="checkbox" name="checks">
|
||||||
<label for="checkbox-2">Checkbox 2</label>
|
<label for="checkbox-2">Checkbox 2</label>
|
||||||
</span>
|
</span>
|
||||||
|
<span class="form-group__item">
|
||||||
|
<input id="checkbox-3" type="checkbox" name="checks">
|
||||||
|
<label for="checkbox-3">Checkbox 3</label>
|
||||||
|
</span>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -407,8 +411,10 @@ or [`input`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_even
|
|||||||
> Individual field validation can be disable by setting
|
> Individual field validation can be disable by setting
|
||||||
[`onlyOnSubmit`](#onlyOnSubmit) to true.
|
[`onlyOnSubmit`](#onlyOnSubmit) to true.
|
||||||
|
|
||||||
## Field Options
|
## Field Options {#field-options}
|
||||||
|
|
||||||
|
* [maxCount](#maxcount)
|
||||||
|
* [minCount](#mincount)
|
||||||
* [optional](#optional)
|
* [optional](#optional)
|
||||||
* [pattern](#pattern)
|
* [pattern](#pattern)
|
||||||
* [patternMessage](#patternmessage)
|
* [patternMessage](#patternmessage)
|
||||||
@ -429,6 +435,24 @@ properly formatted JSON object with the properties and values below.
|
|||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### maxCount (Checkboxes Only)
|
||||||
|
|
||||||
|
**Default:** `null`
|
||||||
|
|
||||||
|
Checkbox groups with the `maxCount` property set to an integer will fail validation
|
||||||
|
if the number of checked inputs is over this limit.
|
||||||
|
|
||||||
|
> See [here](#checkbox-and-radio-fields) for more information on how to apply options to checkboxes.
|
||||||
|
|
||||||
|
### minCount (Checkboxes Only)
|
||||||
|
|
||||||
|
**Default:** `1`
|
||||||
|
|
||||||
|
Checkbox groups with the `minCount` property set to an integer will fail validation
|
||||||
|
if the number of checked inputs is under this limit.
|
||||||
|
|
||||||
|
> See [here](#checkbox-and-radio-fields) for more information on how to apply options to checkboxes.
|
||||||
|
|
||||||
### optional
|
### optional
|
||||||
|
|
||||||
**Default:** `false`
|
**Default:** `false`
|
||||||
|
@ -62,7 +62,7 @@
|
|||||||
<label for="checkbox-1">Checkbox 1</label>
|
<label for="checkbox-1">Checkbox 1</label>
|
||||||
</span>
|
</span>
|
||||||
<span class="form-group__item">
|
<span class="form-group__item">
|
||||||
<input data-validation='{"optional": false}' id="checkbox-2" type="checkbox" name="checks">
|
<input id="checkbox-2" type="checkbox" name="checks">
|
||||||
<label for="checkbox-2">Checkbox 2</label>
|
<label for="checkbox-2">Checkbox 2</label>
|
||||||
</span>
|
</span>
|
||||||
<span class="form-group__item">
|
<span class="form-group__item">
|
||||||
|
Reference in New Issue
Block a user