Radio

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

Import

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

Props

Props for Radio in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the radio. Usually inherited from the RadioGroup or Form.
`isEmphasized`	false \| true	—	Whether the radio 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	—	Label text for the element.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLLabelElement \| ((el: HTMLLabelElement) => void) \| { current?: HTMLLabelElement \| null \| undefined; }	—	Ref for the underlying label element.
`inputRef`	HTMLInputElement \| ((el: HTMLInputElement) => void) \| { current?: HTMLInputElement \| null \| undefined; }	—	Ref for the underlying input element.
`onBlur`	(e: FocusEvent) => void	—	Handler that is called when the element loses focus. 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-describedby`	string	—	Identifies the element (or elements) that describes 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 radio button is disabled. solidaria
`onHoverStart`	() => void	—	Handler called when hover starts. solidaria-components
`onHoverEnd`	() => void	—	Handler called when hover ends. solidaria-components
`onHoverChange`	(isHovered: boolean) => void	—	Handler called when hover state changes. solidaria-components
`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
`value`*	string	—	The value of the radio button, used when submitting an HTML form. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler that is called when the element's focus status changes. solidaria
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An error message for the radio. solidaria-components
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	A description for the radio. solidaria-components
`onClickCapture`	JSX.EventHandlerUnion<HTMLLabelElement, MouseEvent, JSX.EventHandler<HTMLLabelElement, MouseEvent>>	—	Handler called when clicking the label in capture phase. solidaria-components

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

RadioGroup props

Props for RadioGroup in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the RadioGroup.
`orientation`	'horizontal' \| 'vertical'	—	The axis the radio elements should align with.
`labelPosition`	'top' \| 'side'	—	The label's overall position relative to the radio items.
`labelAlign`	'start' \| 'end'	—	The label's horizontal alignment relative to the radio 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 RadioGroup 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.
`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.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Children radios.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the radio group root element.
`id`	string	—	The element's unique identifier. solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler that is called when the radio group loses focus. solidaria
`onChange`	(value: string) => void	—	Handler that is called when the value changes. solid-stately
`onFocus`	(e: FocusEvent) => void	—	Handler that is called when the radio group receives focus. 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 radio group is disabled. solidaria
`render`	(props: JSX.HTMLAttributes<HTMLDivElement>, renderProps: RadioGroupRenderProps) => JSX.Element	—	Custom renderer for the outer radio group element. solidaria-components
`form`	string	—	The form to associate the radio group with. solidaria
`name`	string	—	The name of the radio group, used when submitting an HTML form. solidaria
`value`	string	—	The current selected value (controlled). solid-stately
`onFocusChange`	(isFocused: boolean) => void	—	Handler that is called when the radio group's focus status changes. solidaria
`validationState`	'valid' \| 'invalid'	—	Backward-compatible controlled validation state. solid-stately
`defaultValue`	string	—	The default selected value (uncontrolled). solid-stately
`isReadOnly`	false \| true	—	Whether the radio group is read only. solidaria
`isInvalid`	false \| true	—	Whether the radio group is invalid. solidaria
`isRequired`	false \| true	—	Whether the radio group is required. solidaria
`validationBehavior`	'aria' \| 'native'	—	Validation behavior for the radio group. solidaria
`validate`	ValidationFunction<string \| null>	—	Custom validation function. solid-stately
`renderHelpText`	false \| true	—	Whether this component renders the visible description/error help-text nodes. Defaults to `true`. A styled layer (e.g. solid-spectrum) passes `false` to keep the id-minting and `aria-describedby` wiring here (so child radios inherit the group's shared description via `radioGroupData`) while owning the visible node itself — mirroring RAC, where the group exposes a `TextContext`/`FieldError` slot rather than rendering its own help text. solidaria-components

Declared in packages/viviana-ui/src/radio/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.