Autocomplete

Filter-as-you-type input with suggestions.

Installation

npx @noarka/cli add autocomplete

Usage

tsx

import {  Autocomplete,  AutocompleteContent,  AutocompleteEmpty,  AutocompleteInput,  AutocompleteItem,} from "@noarka/ui";

tsx

<div className="mx-auto max-w-xs">  <Autocomplete>    <AutocompleteInput placeholder="Search languages..." />    <AutocompleteContent>      <AutocompleteItem value="typescript">TypeScript</AutocompleteItem>      <AutocompleteItem value="python">Python</AutocompleteItem>      <AutocompleteItem value="rust">Rust</AutocompleteItem>      <AutocompleteEmpty>No language found.</AutocompleteEmpty>    </AutocompleteContent>  </Autocomplete></div>

Examples

Frameworks

A longer list to filter through.

Disabled item

Options can be locked individually.

With label

Pair the field with a form label.

Favorite fruit

API reference

Autocomplete

Prop	Type	Default
`value` Controlled selected value. Use with onValueChange.	`string`	`-`
`defaultValue` Initially selected value when uncontrolled.	`string`	`-`
`onValueChange` Called when the selection changes.	`(value: string) => void`	`-`
`itemToStringLabel` Formats values for display. Defaults to resolving item labels automatically.	`(value: unknown) => string`	`-`
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`disabled` Disable the input and popup.	`boolean`	`false`
`openOnInputClick` Show the popup on click. Leave off so it only appears while typing.	`boolean`	`false`
`name` Identifies the field when the form is submitted.	`string`	`-`

AutocompleteInput

Prop	Type	Default
`placeholder` Hint text shown while empty.	`string`	`-`
`disabled` Disable the input.	`boolean`	`false`
`className` Additional classes merged with the default input styles.	`string`	`-`

AutocompleteContent

Prop	Type	Default
`side` Preferred placement side.	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`sideOffset` Gap between input and popup.	`number`	`4`
`align` Alignment against the input edge.	`"start" \| "center" \| "end"`	`"center"`
`alignOffset` Offset along the alignment axis.	`number`	`0`
`render` Polymorphic render prop. Use to render a custom element instead of the default popup.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default popup styles.	`string`	`-`

AutocompleteItem

Prop	Type	Default
`value` Value set when selected. Labels display via the item text.	`string`	`-`
`disabled` Disable the item.	`boolean`	`false`
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default item styles.	`string`	`-`

AutocompleteEmpty

Prop	Type	Default
`children` Shown when the query matches nothing.	`ReactNode`	`"No results found."`
`className` Additional classes merged with the default empty styles.	`string`	`-`