arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(CheckboxGroup): new component (#3862)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
This commit is contained in:
TribeWeb
2025-04-22 17:03:27 +01:00
committed by GitHub
parent 22edfd708a
commit 9c3d53a02d
29 changed files with 4087 additions and 959 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/app/components/content/ComponentCode.vue
View File

@@ -153,7 +153,8 @@ const options = computed(() => {
const items = propItems.length
? propItems.map((item: any) => ({
value: item,
label: String(item)
label: String(item),
chip: key.toLowerCase().endsWith('color') ? { color: item } : undefined
}))
: prop?.type === 'boolean' || prop?.type === 'boolean | undefined'
? [{ value: true, label: 'true' }, { value: false, label: 'false' }]

16
docs/app/components/content/examples/form/FormExampleElements.vue
View File

@@ -30,6 +30,9 @@ const schema = z.object({
radioGroup: z.string().refine(value => value === 'option-2', {
message: 'Select Option 2'
}),
checkboxGroup: z.any().refine(values => !!values?.find((option: any) => option === 'option-2'), {
message: 'Include Option 2'
}),
slider: z.number().max(20, { message: 'Must be less than 20' }),
pin: z.string().regex(/^\d$/).array().length(5)
})
@@ -101,11 +104,14 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
<UFormField label="Textarea" name="textarea">
<UTextarea v-model="state.textarea" class="w-full" />
</UFormField>
<UFormField name="radioGroup">
<URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
</UFormField>
<div class="flex gap-4">
<UFormField name="radioGroup">
<URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
</UFormField>
<UFormField name="checkboxGroup">
<UCheckboxGroup v-model="state.checkboxGroup" legend="Checkbox group" :items="items" />
</UFormField>
</div>
<UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
<UPinInput v-model="state.pin" />
</UFormField>

349
docs/content/3.components/checkbox-group.md Normal file
View File

@@ -0,0 +1,349 @@
---
title: CheckboxGroup
description: A set of checklist buttons to select multiple option from a list.
category: form
links:
- label: CheckboxGroup
icon: i-custom-reka-ui
to: https://reka-ui.com/docs/components/checkbox#group-root
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CheckboxGroup.vue
navigation.badge: Soon
---
## Usage
Use the `v-model` directive to control the value of the CheckboxGroup or the `default-value` prop to set the initial value when you do not need to control its state.
### Items
Use the `items` prop as an array of strings or numbers:
::component-code
---
prettier: true
ignore:
- modelValue
- items
external:
- items
- modelValue
externalTypes:
- CheckboxGroupItem[]
- CheckboxGroupValue[]
props:
modelValue:
- 'System'
items:
- 'System'
- 'Light'
- 'Dark'
---
::
You can also pass an array of objects with the following properties:
- `label?: string`{lang="ts-type"}
- `description?: string`{lang="ts-type"}
- [`value?: string`{lang="ts-type"}](#value-key)
- `disabled?: boolean`{lang="ts-type"}
::component-code
---
ignore:
- modelValue
- items
external:
- items
- modelValue
externalTypes:
- CheckboxGroupItem[]
- CheckboxGroupValue[]
props:
modelValue:
- 'system'
items:
- label: 'System'
description: 'This is the first option.'
value: 'system'
- label: 'Light'
description: 'This is the second option.'
value: 'light'
- label: 'Dark'
description: 'This is the third option.'
value: 'dark'
---
::
::caution
When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
::
### Value Key
You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.
::component-code
---
ignore:
- modelValue
- items
- valueKey
external:
- items
- modelValue
externalTypes:
- CheckboxGroupItem[]
- CheckboxGroupValue[]
props:
modelValue:
- 'light'
valueKey: 'id'
items:
- label: 'System'
description: 'This is the first option.'
id: 'system'
- label: 'Light'
description: 'This is the second option.'
id: 'light'
- label: 'Dark'
description: 'This is the third option.'
id: 'dark'
---
::
### Legend
Use the `legend` prop to set the legend of the CheckboxGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
externalTypes:
- CheckboxGroupItem[]
props:
legend: 'Theme'
defaultValue:
- 'System'
items:
- 'System'
- 'Light'
- 'Dark'
---
::
### Color
Use the `color` prop to change the color of the CheckboxGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
externalTypes:
- CheckboxGroupItem[]
items:
color:
- primary
- secondary
- success
- info
- warning
- error
- neutral
props:
color: neutral
defaultValue:
- 'System'
items:
- 'System'
- 'Light'
- 'Dark'
---
::
### Variant
Use the `variant` prop to change the variant of the CheckboxGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
externalTypes:
- CheckboxGroupItem[]
items:
color:
- primary
- secondary
- success
- info
- warning
- error
- neutral
variant:
- list
- card
props:
color: 'primary'
variant: 'card'
defaultValue:
- 'System'
items:
- 'System'
- 'Light'
- 'Dark'
---
::
### Size
Use the `size` prop to change the size of the CheckboxGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
externalTypes:
- CheckboxGroupItem[]
items:
variant:
- list
- card
props:
size: 'xl'
variant: 'list'
defaultValue:
- 'System'
items:
- 'System'
- 'Light'
- 'Dark'
---
::
### Orientation
Use the `orientation` prop to change the orientation of the CheckboxGroup. Defaults to `vertical`.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
externalTypes:
- CheckboxGroupItem[]
items:
variant:
- list
- card
props:
orientation: 'horizontal'
variant: 'list'
defaultValue:
- 'System'
items:
- 'System'
- 'Light'
- 'Dark'
---
::
### Indicator
Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
externalTypes:
- CheckboxGroupItem[]
items:
indicator:
- start
- end
- hidden
variant:
- list
- card
props:
indicator: 'end'
variant: 'card'
defaultValue:
- 'System'
items:
- 'System'
- 'Light'
- 'Dark'
---
::
### Disabled
Use the `disabled` prop to disable the CheckboxGroup.
::component-code
---
prettier: true
ignore:
- defaultValue
- items
external:
- items
externalTypes:
- CheckboxGroupItem[]
props:
disabled: true
defaultValue:
- 'System'
items:
- 'System'
- 'Light'
- 'Dark'
---
::
## API
### Props
:component-props
### Slots
:component-slots
### Emits
:component-emits
## Theme
:component-theme

35
docs/content/3.components/checkbox.md
View File

@@ -156,6 +156,23 @@ props:
---
::
### Variant :badge{label="Not released" class="align-text-top"}
Use the `variant` prop to change the variant of the Checkbox.
::component-code
---
ignore:
- label
- defaultValue
props:
color: 'primary'
variant: 'card'
defaultValue: true
label: Check me
---
::
### Size
Use the `size` prop to change the size of the Checkbox.
@@ -167,6 +184,24 @@ ignore:
- defaultValue
props:
size: xl
variant: list
defaultValue: true
label: Check me
---
::
### Indicator :badge{label="Not released" class="align-text-top"}
Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
::component-code
---
ignore:
- label
- defaultValue
props:
indicator: 'end'
variant: 'card'
defaultValue: true
label: Check me
---