checkbox-group
checkbox-group
ts
export default {
slots: {
root: 'relative',
fieldset: 'flex gap-x-2',
legend: 'mb-1 block font-medium text-default',
item: '',
},
variants: {
orientation: {
horizontal: {
fieldset: 'flex-row',
},
vertical: {
fieldset: 'flex-col',
},
},
size: {
xs: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
},
sm: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
},
md: {
fieldset: 'gap-y-1',
legend: 'text-sm',
},
lg: {
fieldset: 'gap-y-1',
legend: 'text-sm',
},
xl: {
fieldset: 'gap-y-1.5',
legend: 'text-base',
},
},
required: {
true: {
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-error',
},
},
},
defaultVariants: {
size: 'md',
} as const,
}ts
export default {
slots: {
root: 'relative',
fieldset: 'flex gap-x-2',
legend: 'mb-1 block font-medium text-default',
item: '',
},
variants: {
orientation: {
horizontal: {
fieldset: 'flex-row',
},
vertical: {
fieldset: 'flex-col',
},
},
size: {
xs: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
},
sm: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
},
md: {
fieldset: 'gap-y-1',
legend: 'text-sm',
},
lg: {
fieldset: 'gap-y-1',
legend: 'text-sm',
},
xl: {
fieldset: 'gap-y-1.5',
legend: 'text-base',
},
},
required: {
true: {
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-error',
},
},
},
defaultVariants: {
size: 'md',
} as const,
}