Checkbox Group and Radio they're perfect for building out custom UIs for selectors.
Tabs are built using the
x-group,
x-group:option, and
x-group:check components.
Clicking an option will select it, and when the radio/checkbox
group is focused, the arrow keys will change the selected
option.
<div x-group>
<label x-group:option>
<input x-group:check type="checkbox">
<span>Option 1</span>
</label>
<label x-group:option>
<input x-group:check type="checkbox">
<span>Option 2</span>
</label>
</div>
Options can be passed as a block or individually using the
x-nui
directive.
Be sure to change the case type of the option name from "camelCase" to "kebab-case" when passing the options individually.
In block
<div x-nui="{expose:'data'}"></div>Individually
<div x-nui:expose="data"></div>| name | type | default | description |
|---|---|---|---|
expose
|
null,string |
null
|
Exposes the component api.
Receives the name of the variable where the component
api will be exposed.
|
The component API is an
object
that contains the following properties:
| name | type | description |
|---|---|---|
main
|
element |
Element where it is found:
x-group.
|
selected
|
element[] | List of selected checkbox/radio. |
checks
|
element[] |
All checkbox/radio elements found
x-group:check.
|
CSS classes that are added to describe a state.
| name | description |
|---|---|
selected
|
Set to x-group:option when
selected.
|