Components / inputs

Search

Pill-shaped input for filtering or searching.

import { Search } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Search } from '@basiiik/ui';

<Search aria-label="Search projects" />

• Example values were filled in for the required prop aria-label: replace them with your own.
• Hover and Focused are CSS. Filled is a non-empty value and reveals the clear button (also cleared by Escape). Disabled is the disabled attribute. aria-label is required and also names the search landmark.
• Storybook: Inputs/Search.

Props

Other props

States. Hover and Focused are CSS. Filled is a non-empty value and reveals the clear button (also cleared by Escape). Disabled is the disabled attribute. aria-label is required and also names the search landmark.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Filter or search within a page, list or site

Do not use it when

• Entering non-search text (use Text Field)

Rules for agents

• Every Search has an aria-label; it is required because there is no visible label
• For submit-on-Enter search, wrap Search in a <form> with an onSubmit handler; for live filtering, update results on change
• Use onClear to reset the results when the field is cleared with the button or Escape
• Announce the result count in a polite live region, and show an Empty State with variant="no-results" when nothing matches
• Use a placeholder that says what can be searched

Avoid

• Using Search for text that is not a query (use Text Field)
• Two Search fields on the same page with the same aria-label
• Filtering on every keystroke against a slow server without a debounce
• Clearing the results but leaving the old query in the field

Writing the content

• aria-label and placeholder name the scope: 'Search projects', 'Search help articles'
• Use sentence case

Keyboard

• Enter submits when the field is inside a <form>
• Escape clears

Accessibility

• aria-label is required (no visible label)
• Clear button needs aria-label="Clear search"

Colour tokens it reads

Related

• Text Field
• Empty State

inputs 15 Figma variants Try it in the live demo