Checkbox

The props declared for Checkbox, generated from the types @proyecto-viviana/ui ships.

Import

import { Checkbox } from "@proyecto-viviana/ui";

Props

Props for Checkbox in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the checkbox.
`isEmphasized`	false \| true	—	Whether the checkbox should be displayed with an emphasized style.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Additional CSS class name.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Label text for the checkbox.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	A description for the checkbox, displayed below the label.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An error message for the checkbox, displayed when invalid.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the underlying field (root `<div>`) element.
`inputRef`	HTMLInputElement \| ((el: HTMLInputElement) => void) \| { current?: HTMLInputElement \| null \| undefined; }	—	Ref for the underlying input element.
`id`	string	—	The element's unique identifier. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler that is called when the element loses focus. solidaria
`onChange`	(isSelected: boolean) => void	—	Handler that is called when the element's selection state changes. solidaria
`onClick`	(e: MouseEvent) => void	—	Handler that is called when the element is clicked. solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler that is called when the element receives focus. solidaria
`onKeyDown`	(e: KeyboardEvent) => void	—	Handler that is called when a key is pressed. solidaria
`onKeyUp`	(e: KeyboardEvent) => void	—	Handler that is called when a key is released. solidaria
`aria-controls`	string	—	Identifies the element (or elements) whose contents or presence are controlled by the current element. solidaria
`aria-describedby`	string	—	Identifies the element (or elements) that describes the object. solidaria
`aria-errormessage`	string	—	Identifies the element (or elements) that provide an error message for the object. solidaria
`aria-label`	string	—	Defines a string value that labels the current element. solidaria
`aria-labelledby`	string	—	Identifies the element (or elements) that labels the current element. solidaria
`isDisabled`	false \| true	—	Whether the element is disabled. solidaria
`onPress`	(e: PressEvent) => void	—	Handler that is called when the press is released over the target. solidaria
`onPressStart`	(e: PressEvent) => void	—	Handler that is called when a press interaction starts. solidaria
`onPressEnd`	(e: PressEvent) => void	—	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. solidaria
`onPressUp`	(e: PressEvent) => void	—	Handler that is called when a press is released over the target, regardless of whether it started on the target or not. solidaria
`onPressChange`	(isPressed: boolean) => void	—	Handler that is called when the press state changes. solidaria
`autoFocus`	false \| true	—	Whether to autofocus the element. solidaria
`form`	string	—	The form to associate the input with. solidaria
`name`	string	—	The name of the input element, used when submitting an HTML form. solidaria
`value`	string	—	The value of the input element, used when submitting an HTML form. solidaria
`excludeFromTabOrder`	false \| true	—	Whether to exclude the element from the tab order. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler that is called when the element's focus status changes. solidaria
`isSelected`	false \| true	—	Whether the element should be selected (controlled). solidaria
`defaultSelected`	false \| true	—	Whether the element should be selected by default (uncontrolled). solidaria
`isReadOnly`	false \| true	—	Whether the element is read only. solidaria
`isInvalid`	false \| true	—	Whether the element is invalid. solidaria
`isRequired`	false \| true	—	Whether the checkbox is required. solidaria
`validationBehavior`	'aria' \| 'native'	`'native'`	The validation behavior for the checkbox. solidaria
`validate`	ValidationFunction<boolean>	—	Custom validation for the toggle's selected state. solidaria
`isIndeterminate`	false \| true	—	Whether the checkbox is indeterminate. solidaria-components

Declared in packages/viviana-ui/src/checkbox/index.tsx.

CheckboxGroup props

Props for CheckboxGroup in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the Checkboxes in the CheckboxGroup.
`orientation`	'horizontal' \| 'vertical'	—	The axis the checkboxes should align with.
`labelPosition`	'top' \| 'side'	—	The label's overall position relative to the checkbox items.
`labelAlign`	'start' \| 'end'	—	The label's horizontal alignment relative to the checkbox items.
`necessityIndicator`	'label' \| 'icon'	—	Whether the required state should be shown as an icon or text label.
`contextualHelp`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	A contextual help element to place next to the label.
`isEmphasized`	false \| true	—	Whether the Checkboxes should be displayed with an emphasized style.
`styles`	StyleString	—	Spectrum-defined generated classes.
`UNSAFE_className`	string	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`class`	string	—	Backward-compatible class alias. Prefer UNSAFE_className for S2 parity.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Children checkboxes.
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Label for the group.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Description for the group.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Error message when invalid.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the checkbox group root element.
`onBlur`	(e: FocusEvent) => void	—	Handler that is called when the checkbox group loses focus. solid-stately
`onChange`	(value: string[]) => void	—	Handler that is called when the value changes. solid-stately
`onFocus`	(e: FocusEvent) => void	—	Handler that is called when the checkbox group receives focus. solid-stately
`aria-describedby`	string	—	Identifies the element (or elements) that describes the object. solidaria
`aria-details`	string	—	Identifies the element (or elements) that provide a detailed, extended description for the object. solidaria
`aria-label`	string	—	Defines a string value that labels the current element. solidaria
`aria-labelledby`	string	—	Identifies the element (or elements) that labels the current element. solidaria
`isDisabled`	false \| true	—	Whether the checkbox group is disabled. solid-stately
`form`	string	—	The form to associate the checkbox group with. solid-stately
`name`	string	—	The name of the checkbox group, used when submitting an HTML form. solid-stately
`value`	string[]	—	The current selected values (controlled). solid-stately
`onFocusChange`	(isFocused: boolean) => void	—	Handler that is called when the checkbox group's focus status changes. solid-stately
`validationState`	'valid' \| 'invalid'	—	Backward-compatible controlled validation state. solid-stately
`defaultValue`	string[]	—	The default selected values (uncontrolled). solid-stately
`isReadOnly`	false \| true	—	Whether the checkbox group is read only. solid-stately
`isInvalid`	false \| true	—	Whether the checkbox group is invalid. solid-stately
`isRequired`	false \| true	—	Whether the checkbox group is required. solid-stately
`validationBehavior`	'aria' \| 'native'	—	Validation behavior for the checkbox group. solid-stately
`validate`	ValidationFunction<readonly string[]>	—	Custom validation function. solid-stately
`renderHelpText`	false \| true	`true`	Whether this component renders its own description/error-message elements. A styled layer (e.g. solid-spectrum) that renders its own HelpText via a `<Text slot>` sets this to `false`: the wiring stays here — the single source of truth that mints the description/error ids and threads them onto the group and every item's `aria-describedby` — while the visible node is owned by the styled layer. Mirrors RAC, where the group provides a `TextContext` slot and never renders its own description node. solidaria-components

Declared in packages/viviana-ui/src/checkbox/index.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.