Search Field Shell

Server-safe presentational trigger shell for compact booking search bars. Renders a forwardRef button with a label row and a summary row. Designed for Radix PopoverTrigger / DialogTrigger asChild composition — Radix injects aria-expanded, data-state, and onClick automatically.

core/search-field-shell

Installation

1 · Add registry to components.json

2 · Install component

Examples

States

Empty, filled, active, invalid, disabled states and horizontal bar composition.

Empty (placeholder)

Filled

Active (popover open)

Invalid

Disabled

Horizontal bar composition

API Reference

Prop	Type	Default	Description
`label`req	`string`	—	Short uppercase label — e.g. "Where", "Check-in", "Guests".
`summary`req	`string`	—	Current value summary — e.g. "Cape Town", "Dec 15 – 20 · 5 nights".
`placeholder`	`string`	—	Shown in the summary row when filled is false.
`icon`	`React.ReactNode`	—	Optional leading icon rendered next to the label.
`filled`	`boolean`	`false`	When true, label and summary render at full opacity with font-medium weight.
`active`	`boolean`	`false`	Applies an active bg state (e.g. when the associated popover is open).
`invalid`	`boolean`	`false`	Applies a destructive ring to signal a validation error.
`required`	`boolean`	—	Appends a red asterisk to the label and sets aria-required.
`disabled`	`boolean`	—	Disables the button.
`ariaDescription`	`string`	—	Persistent helper text for screen readers. Rendered as a visually hidden element and associated via aria-describedby — announced when the button receives focus.