| defaultValue | boolean | false | |
- Name
- defaultValue
- Description
The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state. - Type
boolean- Default
- false
|
| modelValue | boolean | false | |
- Name
- modelValue
- Description
The controlled pressed state of the toggle. Can be bind as v-model. - Type
boolean- Default
- false
|
| disabled | boolean | false | |
- Name
- disabled
- Description
When true, prevents the user from interacting with the toggle. - Type
boolean- Default
- false
|
| asChild | boolean | false | |
- Name
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. - Type
boolean- Default
- false
|
| as | AsTag | Component | — | |
- Name
- as
- Description
The element or component this component should render as. Can be overwritten by asChild. - Type
ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> | (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed | undefined) => void; }, 'expose'>): any | ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> | 'a' | 'button' | 'div' | 'form' | 'h2' | 'h3' | 'img' | 'input' | 'label' | 'li' | 'nav' | 'ol' | 'p' | 'span' | 'svg' | 'ul' | 'template' | {} & string- Default
- —
|
| name | string | — | |
- Name
- name
- Description
The name of the field. Submitted with its owning form as part of a name/value pair. - Type
string- Default
- —
|
| required | boolean | false | |
- Name
- required
- Description
When true, indicates that the user must set the value before the owning form can be submitted. - Type
boolean- Default
- false
|
| class | ClassValue | — | |
- Name
- class
- Description
Classes added to the part's own element, after its recipe classes. - Type
null | string | false | Record<string, any> | ClassValue[]- Default
- —
|
| size | SwatchSize | 'md' | |
- Name
- size
- Description
- Type
'md' | 'xs' | 'sm' | 'lg'- Default
- 'md'
|
| shape | SwatchShape | 'default' | |
- Name
- shape
- Description
The corner shape: rounded or a full circle. - Type
'default' | 'pill'- Default
- 'default'
|
| hex | string | — | |
- Name
- hex
- Description
The colour the swatch shows, as a hex code such as #1f2937. - Type
string- Default
- —
|
| label | string | — | |
- Name
- label
- Description
Shown with the swatch, e.g. the colour's name. - Type
string- Default
- —
|
| labelClass | ClassValue | — | |
- Name
- labelClass
- Description
Classes added to the label. - Type
null | string | false | Record<string, any> | ClassValue[]- Default
- —
|
| labelPosition | SwatchLabelPosition | 'bottom' | |
- Name
- labelPosition
- Description
Where the label sits: below the swatch or after it. - Type
'bottom' | 'end'- Default
- 'bottom'
|
| value | AcceptableValue | — | |
- Name
- value
- Description
The value the swatch stands for inside a SwatchGroup. - Type
null | string | number | bigint | Record<string, any>- Default
- —
|
| unavailable | boolean | false | |
- Name
- unavailable
- Description
Strikes the swatch through, e.g. for a sold-out colour; it stays selectable. - Type
boolean- Default
- false
|
| unavailableLabel | string | 'Unavailable' | |
- Name
- unavailableLabel
- Description
Read to screen readers after the swatch's name when it is unavailable. - Type
string- Default
- 'Unavailable'
|