SearchField

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

Import

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

Props

Differs from @proyecto-viviana/solid-spectrum

prefix exists only here.
suffix exists only here.
shortcut exists only here.

Props for SearchField in @proyecto-viviana/ui
Prop	Type	Default	Description
`size`	'S' \| 'M' \| 'L' \| 'XL' \| 'sm' \| 'md' \| 'lg'	—	The size of the search field.
`variant`	'filled' \| 'outline'	—	Legacy visual variant. S2 SearchFields 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.
`contextualHelp`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	A contextual help element to place next to the label.
`prefix`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An icon or text rendered before the input in place of the built-in search magnifier, e.g. the register's `/` slash-command glyph.
`suffix`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	An icon or text rendered after the input, e.g. a key hint.
`shortcut`	string	—	A keyboard shortcut hint drawn as a key chip at the end of the field, e.g. `"⌘K"`. Local addition — no S2 counterpart. The register parks the shortcut that focuses the field INSIDE the well (TerminalGlassLab.tsx:157), where a sibling element cannot reach; S2 has no slot for it. Deliberately NOT routed through `suffix`. A suffix is part of the field's accessible name — its id is appended to the input's `aria-labelledby`, which is right for a unit ("kg") and wrong for a shortcut: a screen-reader user would hear "Search lessons ⌘K" as the field's name. The chip is `aria-hidden` decoration; the shortcut itself is announced only if the app describes it (`aria-describedby`).
`slot`	string	—	Slot name when used in a Spectrum context.
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Ref for the search field root element.
`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 called when the value changes. solidaria-components
`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
`onSubmit`	(value: string) => void	—	Handler called when the user submits the search. solidaria-components
`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
`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-components
`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-components
`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
`onClear`	() => void	—	Handler called when the field is cleared. solidaria-components
`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/searchfield/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.