SegmentedControl

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

Import

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

Props

Props for SegmentedControl in @proyecto-viviana/ui
Prop	Type	Default	Description
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The content to display in the segmented control.
`isJustified`	false \| true	—	Whether the items should divide the container width equally.
`selectedKey`	Key	—	The id of the currently selected item.
`defaultSelectedKey`	Key	—	The id of the initially selected item.
`onSelectionChange`	(id: Key) => void	—	Handler that is called when the selection changes.
`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.
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the underlying radiogroup element.
`isDisabled`	false \| true	—	Not yet documented solidaria-components
`disallowEmptySelection`	false \| true	—	Not yet documented solidaria-components

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

SegmentedControlItem props

Props for SegmentedControlItem in @proyecto-viviana/ui
Prop	Type	Default	Description
`id`*	Key	—	The id of the item, matching the value used in SegmentedControl's selectedKey prop.
`children`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The content to display in the segmented control item.
`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.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`ref`	((el: HTMLButtonElement) => void) \| { current?: HTMLButtonElement \| null \| undefined; }	—	Ref for the underlying button element. solidaria-components
`onClick`	(e: MouseEvent) => void	—	A native click handler, useful for form submission. Note: `onPress` is preferred for cross-device compatibility. solidaria
`aria-controls`	string	—	Identifies the element (or elements) whose contents or presence are controlled by the button. solidaria
`aria-current`	false \| true \| 'page' \| 'step' \| 'location' \| 'date' \| 'time' \| 'true' \| 'false'	—	Indicates the current "pressed" state of toggle buttons. solidaria
`aria-describedby`	string	—	The id of the element that describes the button. solidaria
`aria-details`	string	—	The id of the element that provides detailed, extended description for the button. solidaria
`aria-disabled`	false \| true \| 'true' \| 'false'	—	Indicates that the button is perceivable but disabled. solidaria
`aria-expanded`	false \| true \| 'true' \| 'false'	—	Whether the popup is expanded. solidaria
`aria-haspopup`	false \| true \| 'true' \| 'false' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'	—	Whether the button has a popup. solidaria
`aria-label`	string	—	The accessible label for the button. solidaria
`aria-labelledby`	string	—	The id of the element that labels the button. solidaria
`isDisabled`	boolean \| Accessor<boolean>	—	Whether the button is disabled. solidaria
`elementType`	'button' \| 'a' \| 'div' \| 'input' \| 'span'	—	The HTML element type to use for the button. solidaria
`href`	string	—	The URL to link to (for anchor elements). solidaria
`target`	string	—	The target for the link (for anchor elements). solidaria
`rel`	string	—	The rel attribute for the link (for anchor elements). solidaria
`allowFocusWhenDisabled`	false \| true	—	Whether to allow focus on the button when it is disabled. This enables showing tooltips on disabled buttons. When true, the button gets `tabIndex=-1` instead of being removed from tab order. solidaria
`onPress`	(e: PressEvent) => void	—	Handler called when the press is released over the target. solidaria
`onPressStart`	(e: PressEvent) => void	—	Handler called when a press interaction starts. solidaria
`onPressEnd`	(e: PressEvent) => void	—	Handler called when a press interaction ends. solidaria
`onPressUp`	(e: PressEvent) => void	—	Handler called when a press is released over the target. solidaria
`onPressChange`	(isPressed: boolean) => void	—	Handler called when the press state changes. solidaria
`preventFocusOnPress`	false \| true	—	Whether the button should not receive focus on press. solidaria
`autoFocus`	false \| true	—	Whether the element should receive focus on render. solidaria
`type`	'button' \| 'submit' \| 'reset'	—	The type attribute for button elements. solidaria
`form`	string	—	Additional attributes for form buttons. solidaria
`formAction`	string	—	Not yet documented solidaria
`formEncType`	string	—	Not yet documented solidaria
`formMethod`	string	—	Not yet documented solidaria
`formNoValidate`	false \| true	—	Not yet documented solidaria
`formTarget`	string	—	Not yet documented solidaria
`name`	string	—	The name attribute for form buttons. solidaria
`value`	string	—	The value attribute for form buttons. solidaria
`excludeFromTabOrder`	false \| true	—	Whether to exclude the button from the tab order. solidaria
`toggleKey`	Key	—	Key used when inside ToggleButtonGroup selection state. solidaria-components

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