Search Field — Vortex Design System

<Stack
  width="320px"
  maxWidth="100%"
>
  <SearchField
    name="playground-search"
    label="Search members"
    placeholder="Search by name or email"
    size="sm"
    variant="outline"
  />
</Stack>

Features

Shows a search icon and a clear button once it has a value.
Submits with Enter or an optional button.
Clears with Escape, then leaves Escape to parent overlays.
Supports responsive sizes and widths.

Sizes

The default is sm. The submit button matches the field height.

import { SearchField, Stack } from "@vortexlabs/vortex";

export const Example = () => (
  <Stack gap={3} width="320px" maxWidth="100%">
    <SearchField name="sm" label="Search" placeholder="Search" />
    <SearchField name="md" label="Search" placeholder="Search" size="md" />
    <SearchField
      name="responsive"
      label="Search"
      placeholder="Search"
      size={{ xs: "sm", md: "md" }}
      showSubmit
    />
  </Stack>
);

Variants

Search Field has two visual styles: outline and fill. The default is outline.

import { SearchField, Stack } from "@vortexlabs/vortex";

export const Example = () => (
  <Stack gap={3} width="320px" maxWidth="100%">
    <SearchField name="outline" label="Search" defaultValue="Alex" />
    <SearchField name="fill" label="Search" variant="fill" defaultValue="Alex" />
  </Stack>
);

Label

label names the input for assistive technology. Set showLabel to show it above the field.

Search members

import { SearchField, Stack } from "@vortexlabs/vortex";

export const Example = () => (
  <Stack gap={3} width="320px" maxWidth="100%">
    <SearchField
      name="shown"
      label="Search members"
      showLabel
      placeholder="Search by name or email"
    />
  </Stack>
);

Disabled

Set disabled to prevent interaction. It also disables the submit button and hides the clear button.

import { SearchField, Stack } from "@vortexlabs/vortex";

export const Example = () => (
  <Stack gap={3} width="320px" maxWidth="100%">
    <SearchField name="disabled" label="Search" disabled defaultValue="Alex" showSubmit />
  </Stack>
);

Controlled State

Pass value and update it in onChange, or use defaultValue to let the field manage itself. onSubmit runs on Enter and on the button set by showSubmit. Clearing calls onChange without an event.

Submitted:

import { SearchField, Stack, Text } from "@vortexlabs/vortex";
import React from "react";

export const Example = () => {
  const [value, setValue] = React.useState("");
  const [submitted, setSubmitted] = React.useState("");

  return (
    <Stack gap={3}>
      <SearchField
        name="members"
        label="Search members"
        placeholder="Search by name or email"
        showSubmit
        value={value}
        onChange={(args) => setValue(args.value)}
        onSubmit={(args) => setSubmitted(args.value)}
      />
      <Text>Submitted: {submitted}</Text>
    </Stack>
  );
};

Use TextField for other single-line input, and CommandMenu to search and run actions from an overlay.

Accessibility

Key

Description

Enter

Calls onSubmit with the current value.

EscEscape

Clears the value. When the field is empty, the key reaches parent overlays.

Set label to name the input, such as "Search members".

Set clearLabel when the default "Clear search" doesn't fit your language.