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>
```
### 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
it instead of the individual options.
- The `<legend>` tag may be used to give the option set a heading.
- Each `checkbox` or `radio` `<input>` type should be wrapped in a
`form-group__item` class. This class is not used programattically, and is only
used for styling.
- [Field Options](#field-options) are shared amongst all inputs in a check or
radio group. Your options only need to be applied to one of the inputs in the
group that shares a `name` attribute.
```html
<fieldset class="form-group">
<legend>Check Group</legend>
<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>
</span>
<span class="form-group__item">
<input id="checkbox-2" type="checkbox" name="checks">
<label for="checkbox-2">Checkbox 2</label>
</span>
<span class="form-group__item">
<input id="checkbox-3" type="checkbox" name="checks">
<label for="checkbox-3">Checkbox 3</label>
</span>
</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
[`onlyOnSubmit`](#onlyOnSubmit) to true.
## Field Options
## Field Options {#field-options}
* [maxCount](#maxcount)
* [minCount](#mincount)
* [optional](#optional)
* [pattern](#pattern)
* [patternMessage](#patternmessage)
@ -429,6 +435,24 @@ properly formatted JSON object with the properties and values below.
</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
**Default:** `false`

View File

@ -62,7 +62,7 @@
<label for="checkbox-1">Checkbox 1</label>
</span>
<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>
</span>
<span class="form-group__item">