updated README.md with checkbox field options

This commit is contained in:
2025-04-07 14:51:05 -04:00
parent eb9a292586
commit 81ddac90d1
2 changed files with 31 additions and 7 deletions

View File

@ -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`

View File

@ -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">