TextField

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

Import

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

Props

Differs from @proyecto-viviana/solid-spectrum

suffix exists only here.
surface exists only here.

Props for TextField in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the text field.
`variant`	'filled' \| 'outline'	—	Legacy visual variant. S2 TextFields do not expose visual variants.
`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 text for the input.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Description text shown below the input.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Error message shown when invalid.
`labelPosition`	'top' \| 'side'	—	Position of the label relative to the input.
`labelAlign`	'start' \| 'end'	—	Text alignment for side labels.
`necessityIndicator`	'label' \| 'icon'	—	Whether required fields show an icon or text label.
`prefix`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An icon or text rendered before the input, e.g. a unit or protocol.
`suffix`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An icon or text rendered after the input, e.g. a unit or key hint.
`surface`	'well' \| 'tutor'	`"well"`	The matte surface family the field sits on.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`id`	string	—	The element's unique identifier. solidaria
`onBeforeInput`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, InputEvent>	—	Not yet documented solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler that is called when the element loses focus. solidaria
`onChange`	(value: string) => void	—	Handler that is called when the value changes. solidaria
`onCompositionEnd`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, CompositionEvent>	—	Not yet documented solidaria
`onCompositionStart`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, CompositionEvent>	—	Not yet documented solidaria
`onCompositionUpdate`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, CompositionEvent>	—	Not yet documented solidaria
`onCopy`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, ClipboardEvent>	—	Not yet documented solidaria
`onCut`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, ClipboardEvent>	—	Not yet documented solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler that is called when the element receives focus. solidaria
`onInput`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, InputEvent>	—	Not yet documented 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
`onPaste`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, ClipboardEvent>	—	Not yet documented solidaria
`onSelect`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, Event>	—	Not yet documented solidaria
`aria-activedescendant`	string	—	Identifies the currently active element when focus is on the textbox. solidaria
`aria-autocomplete`	'none' \| 'list' \| 'inline' \| 'both'	—	How predictions of the user's intended value are presented. solidaria
`aria-controls`	string	—	Identifies the element whose contents or presence the text field controls. solidaria
`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-errormessage`	string	—	Identifies the element that provides an error message for the object. solidaria
`aria-haspopup`	false \| true \| 'true' \| 'false' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'	—	The kind of popup the text field can open. 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 input is disabled. solidaria
`render`	(props: JSX.HTMLAttributes<HTMLDivElement>, renderProps: TextFieldRenderProps) => JSX.Element	—	Custom renderer for the outer text field element. solidaria-components
`autoFocus`	false \| true	—	Whether the element should receive focus on mount. solidaria
`type`	string	—	The type of input to render. solidaria
`form`	string	—	Associates the input with a form element by id. solidaria
`name`	string	—	The name of the input element, used when submitting an HTML form. solidaria
`value`	string	—	The current value (controlled). solidaria
`excludeFromTabOrder`	false \| true	—	Whether to exclude the element from the sequential tab order. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler that is called when the element's focus status changes. solidaria
`validationState`	'valid' \| 'invalid'	—	Legacy validation state. Kept as a `createSlotId` dependency so a description/error slot is re-probed when this flips, matching RAC `useField` (`useField.ts:38-48`). solidaria
`defaultValue`	string	—	The default value (uncontrolled). solidaria
`isReadOnly`	false \| true	—	Whether the input is read only. solidaria
`isInvalid`	false \| true	—	Whether the input value is invalid. solidaria
`isRequired`	false \| true	—	Whether the input is required. solidaria
`validationBehavior`	'aria' \| 'native'	—	Whether to use native HTML form validation or ARIA validation semantics. solidaria
`validate`	(value: any) => string \| string[] \| true \| null \| undefined	—	A function that returns an error message if a given value is invalid. solidaria
`placeholder`	string	—	Placeholder text for the input. solidaria
`autoComplete`	string	—	Whether to enable auto complete. solidaria
`pattern`	string	—	Regex pattern to validate the input value. solidaria
`autoCapitalize`	'none' \| 'on' \| 'off' \| 'sentences' \| 'words' \| 'characters'	—	Controls whether and how text input is automatically capitalized. solidaria
`inputMode`	'none' \| 'search' \| 'text' \| 'url' \| 'tel' \| 'email' \| 'numeric' \| 'decimal'	—	The input mode hint for virtual keyboards. solidaria
`enterKeyHint`	'search' \| 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'send'	—	Hint for the enter key action on virtual keyboards. solidaria
`maxLength`	number	—	The maximum number of characters supported by the input. solidaria
`minLength`	number	—	The minimum number of characters required by the input. solidaria
`autoCorrect`	string	—	Whether to enable auto correct. solidaria
`spellCheck`	'true' \| 'false'	—	Whether to enable spell check. solidaria
`inputElementType`	'input' \| 'textarea'	—	The element type to use for the input. Defaults to 'input'. solidaria
`labelElementType`	'label' \| 'div' \| 'span'	`'label'`	The HTML element used to render the label, e.g. 'label', or 'span'. solidaria

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

TextArea props

Props for TextArea in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the text area.
`variant`	'filled' \| 'outline'	—	Legacy visual variant. S2 TextAreas do not expose visual variants.
`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 text for the textarea.
`description`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Description text shown below the textarea.
`errorMessage`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	Error message shown when invalid.
`labelPosition`	'top' \| 'side'	—	Position of the label relative to the textarea.
`labelAlign`	'start' \| 'end'	—	Text alignment for side labels.
`necessityIndicator`	'label' \| 'icon'	—	Whether required fields show an icon or text label.
`slot`	string \| false	—	A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components
`id`	string	—	The element's unique identifier. solidaria
`onBeforeInput`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, InputEvent>	—	Not yet documented solidaria
`onBlur`	(e: FocusEvent) => void	—	Handler that is called when the element loses focus. solidaria
`onChange`	(value: string) => void	—	Handler that is called when the value changes. solidaria
`onCompositionEnd`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, CompositionEvent>	—	Not yet documented solidaria
`onCompositionStart`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, CompositionEvent>	—	Not yet documented solidaria
`onCompositionUpdate`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, CompositionEvent>	—	Not yet documented solidaria
`onCopy`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, ClipboardEvent>	—	Not yet documented solidaria
`onCut`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, ClipboardEvent>	—	Not yet documented solidaria
`onFocus`	(e: FocusEvent) => void	—	Handler that is called when the element receives focus. solidaria
`onInput`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, InputEvent>	—	Not yet documented 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
`onPaste`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, ClipboardEvent>	—	Not yet documented solidaria
`onSelect`	JSX.EventHandler<HTMLInputElement \| HTMLTextAreaElement, Event>	—	Not yet documented solidaria
`aria-activedescendant`	string	—	Identifies the currently active element when focus is on the textbox. solidaria
`aria-autocomplete`	'none' \| 'list' \| 'inline' \| 'both'	—	How predictions of the user's intended value are presented. solidaria
`aria-controls`	string	—	Identifies the element whose contents or presence the text field controls. solidaria
`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-errormessage`	string	—	Identifies the element that provides an error message for the object. solidaria
`aria-haspopup`	false \| true \| 'true' \| 'false' \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'	—	The kind of popup the text field can open. 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 input is disabled. solidaria
`render`	(props: JSX.HTMLAttributes<HTMLDivElement>, renderProps: TextFieldRenderProps) => JSX.Element	—	Custom renderer for the outer text field element. solidaria-components
`autoFocus`	false \| true	—	Whether the element should receive focus on mount. solidaria
`form`	string	—	Associates the input with a form element by id. solidaria
`name`	string	—	The name of the input element, used when submitting an HTML form. solidaria
`value`	string	—	The current value (controlled). solidaria
`excludeFromTabOrder`	false \| true	—	Whether to exclude the element from the sequential tab order. solidaria
`onFocusChange`	(isFocused: boolean) => void	—	Handler that is called when the element's focus status changes. solidaria
`validationState`	'valid' \| 'invalid'	—	Legacy validation state. Kept as a `createSlotId` dependency so a description/error slot is re-probed when this flips, matching RAC `useField` (`useField.ts:38-48`). solidaria
`defaultValue`	string	—	The default value (uncontrolled). solidaria
`isReadOnly`	false \| true	—	Whether the input is read only. solidaria
`isInvalid`	false \| true	—	Whether the input value is invalid. solidaria
`isRequired`	false \| true	—	Whether the input is required. solidaria
`validationBehavior`	'aria' \| 'native'	—	Whether to use native HTML form validation or ARIA validation semantics. solidaria
`validate`	(value: any) => string \| string[] \| true \| null \| undefined	—	A function that returns an error message if a given value is invalid. solidaria
`placeholder`	string	—	Placeholder text for the input. solidaria
`autoComplete`	string	—	Whether to enable auto complete. solidaria
`autoCapitalize`	'none' \| 'on' \| 'off' \| 'sentences' \| 'words' \| 'characters'	—	Controls whether and how text input is automatically capitalized. solidaria
`inputMode`	'none' \| 'search' \| 'text' \| 'url' \| 'tel' \| 'email' \| 'numeric' \| 'decimal'	—	The input mode hint for virtual keyboards. solidaria
`enterKeyHint`	'search' \| 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'send'	—	Hint for the enter key action on virtual keyboards. solidaria
`maxLength`	number	—	The maximum number of characters supported by the input. solidaria
`minLength`	number	—	The minimum number of characters required by the input. solidaria
`autoCorrect`	string	—	Whether to enable auto correct. solidaria
`spellCheck`	'true' \| 'false'	—	Whether to enable spell check. solidaria
`inputElementType`	'input' \| 'textarea'	—	The element type to use for the input. Defaults to 'input'. solidaria
`labelElementType`	'label' \| 'div' \| 'span'	`'label'`	The HTML element used to render the label, e.g. 'label', or 'span'. solidaria

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