SearchField

Stable
WCAG 2.2 evidence
RTL
Web · iOS · Android

Search input. Built on React Aria SearchField: the input has the searchbox role, Escape clears it, Enter calls onSubmit, and once it holds text a clear button appears (named "Clear search", translated by React Aria) that empties the field and keeps focus in it (WCAG 2.1.1, 4.1.2). Focus draws the brand border and halo (2.4.7); paste and autofill are never blocked (3.3.7, 3.3.8). Consumer duties: an accessible name (visible label or aria-label, for example "Search"); announcing the number of results (for example with announceStatus, WCAG 4.1.3); registering the shortcut that shortcut advertises.

import { SearchField } from "@nexera-ui/react";

Loading example…

5
examples: 39
props: 7
live controls: 3
platforms: 10
WCAG criteria: 6
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

description

placeholder

platform

isDisabledfalse

isReadOnlyfalse

isRequiredfalse

isInvalidfalse

Generated code

import { SearchField } from "@nexera-ui/react";

<SearchField />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Platforms

Figma Platform: Web (40 px, border), iOS (36 pt grey pill; the pointer target is 44 pt) and Android (56 dp round bar with the navigation button and the account avatar as leadingAction / trailingAction).

Loading example…

app.tsx

import { IconButton, SearchField } from "@nexera-ui/react";
import { LuMenu, LuUser } from "react-icons/lu";

export function Platforms() {
  return (
    <div className="flex flex-col gap-6">
      <SearchField
        placeholder="Search people, teams, requests"
        shortcut="Ctrl K"
        aria-keyshortcuts="Control+K"
        platform="web"
        aria-label="Search (web)"
      />
      <SearchField
        placeholder="Search people, teams, requests"
        shortcut="Ctrl K"
        aria-keyshortcuts="Control+K"
        platform="ios"
        aria-label="Search (iOS)"
      />
      <SearchField
        placeholder="Search people, teams, requests"
        shortcut="Ctrl K"
        aria-keyshortcuts="Control+K"
        platform="android"
        aria-label="Search (Android)"
        leadingAction={
          <IconButton aria-label="Open navigation" icon={<LuMenu />} variant="ghost" />
        }
        trailingAction={<IconButton aria-label="Account" icon={<LuUser />} variant="ghost" />}
      />
    </div>
  );
}

States

With a value the clear button replaces the shortcut hint; Escape clears too. Disabled and read-only have no clear button.

Loading example…

app.tsx

import { SearchField } from "@nexera-ui/react";

export function States() {
  return (
    <div className="flex flex-col gap-6">
      <SearchField
        placeholder="Search people, teams, requests"
        shortcut="Ctrl K"
        aria-keyshortcuts="Control+K"
        aria-label="Filled"
        defaultValue="Ayesha Khan"
      />
      <SearchField
        placeholder="Search people, teams, requests"
        shortcut="Ctrl K"
        aria-keyshortcuts="Control+K"
        aria-label="Disabled"
        isDisabled
      />
      <SearchField
        placeholder="Search people, teams, requests"
        shortcut="Ctrl K"
        aria-keyshortcuts="Control+K"
        aria-label="Read-only"
        isReadOnly
        defaultValue="payroll"
      />
      <SearchField
        label="Find an employee"
        description="Search by name, ID or team."
        placeholder="Search people"
        isInvalid
        errorMessage="Enter at least two characters."
      />
    </div>
  );
}

Long label

Long labels and helper texts wrap; the value scrolls inside the box.

Loading example…

app.tsx

import { SearchField } from "@nexera-ui/react";

export function LongLabel() {
  return (
    <div className="max-w-[12rem]">
      <SearchField
        label="Search every employee, team and open request in the organisation"
        description="Results update as you type; press Enter to open the first one."
        defaultValue="Ayesha Khan binte Muhammad Rafiq"
      />
    </div>
  );
}

Right to left

Right-to-left: the glyph moves to the right and the clear button to the left.

Loading example…

app.tsx

import { SearchField } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div className="flex flex-col gap-6">
      <SearchField aria-label="بحث" placeholder="ابحث عن الأشخاص والفرق والطلبات" />
      <SearchField aria-label="بحث مع قيمة" defaultValue="عائشة" platform="ios" />
    </div>
  );
}

Props 39

Press "Try it" on a card to load that prop into the playground.

descriptionNexera

ReactNode

Helper text under the field, linked with aria-describedby. Shown when provided.

errorMessageNexera

ReactNode | ((validation: ValidationResult) => ReactNode)

Error text under the field, shown with an icon while the field is invalid and linked with aria-describedby. A function receives React Aria's validation result. Defaults to the browser's validation message.

placeholderNexera

string

Hint shown while the field is empty, for example "Search people, teams, requests". Never the label.

platformNexera

"web" | "ios" | "android"

Platform look. Defaults to the NexeraProvider platform.

shortcutNexera

ReactNode

Keyboard shortcut hint shown at the end of the empty field on web. Visual only (hidden from assistive technology): register the shortcut in your app and describe it with aria-keyshortcuts.

aria-keyshortcutsNexera

string

Shortcut that focuses the field, in ARIA syntax ("Control+K"), set on the input as aria-keyshortcuts.

leadingActionNexera

ReactNode

Interactive element in place of the search glyph, for example an IconButton that opens the navigation. It must carry its own accessible name; the search glyph is shown when this is not set.

trailingActionNexera

ReactNode

Interactive element after the value, for example an account button with its own name.

clearLabelNexera

string

Accessible name of the clear button. React Aria provides it translated ("Clear search"); set it only to change the wording.

inputRefNexera

Ref<HTMLInputElement>

Ref to the native <input> (the root ref points to the field wrapper).

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the root.

labelNexera

FieldLabelContent

Visible label, linked to the control by React Aria (WCAG 1.3.1, 3.3.2). Short noun, for example "Work email". Wraps instead of truncating. A placeholder is never a substitute for it. Not set: the field has no visible label. Not set: the field has no visible label of its own.

aria-labelNexera

string

Accessible name when it must differ from the visible label. Prefer the visible label (WCAG 2.5.3). Accessible name. Required when there is no visible label; translate it. Accessible name. Optional when aria-labelledby is set.

aria-labelledbyNexera

string

Id(s) of element(s) that name the field; wins over the visible label. Id(s) of element(s) that name the field; wins over aria-label. Id(s) of visible element(s) that name the field.

validationBehaviorReact Aria

"native" | "aria"

Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.

typeReact Aria

"search" | "text" | "url" | "tel" | "email" | "password" | (string & {})

The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).

enterKeyHintReact Aria

An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).

isDisabledReact Aria

boolean

Whether the input is disabled.

isReadOnlyReact Aria

boolean

Whether the input can be selected but not changed by the user.

isRequiredReact Aria

boolean

Whether user input is required on the input before form submission.

isInvalidReact Aria

boolean

Whether the input value is invalid.

validateReact Aria

(value: string) => true | ValidationError | null

A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

valueReact Aria

string

The current value (controlled).

defaultValueReact Aria

string

The default value (uncontrolled).

onChangeReact Aria

(value: string) => void

Handler that is called when the value changes.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

autoCompleteReact Aria

string

Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).

maxLengthReact Aria

number

The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).

minLengthReact Aria

number

The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).

patternReact Aria

string

Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).

inputModeReact Aria

Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).

autoCorrectReact Aria

string

An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).

spellCheckReact Aria

string

An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).

nameReact Aria

string

The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).

formReact Aria

string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).

onSubmitReact Aria

(value: string) => void

Handler that is called when the SearchField is submitted.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

7 direct · 3 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.11Non-text ContrastLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.8Target Size (Minimum)Level AA · supporting test
3.3.1Error IdentificationLevel A · tested directly
3.3.2Labels or InstructionsLevel A · tested directly
3.3.7Redundant EntryLevel A · tested directly
3.3.8Accessible Authentication (Minimum)Level AA · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-hovered
data-pressed

Usage

<SearchField className="data-hovered:opacity-90 shadow-sm" />

Theme studio

SearchField

Try every prop. Copy the code.

Examples 4

Platforms

States

Long label

Right to left

Props 39

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components