SearchField

<SearchField aria-label="Search" />

Installation

npx dotui-cli@latest add search-field

Usage

Use a SearchField to allow a user to enter and clear a search query.

import { SearchField } from "@/components/core/search-field";
 
<SearchField label="Search" description="Enter your search query." />;

import { SearchIcon, XIcon } from "lucide-react";
import { Button } from "@/components/core/button";
import { Label, Description } from "@/components/core/field";
import { InputRoot, Input } from "@/components/core/input";
import { SearchFieldRoot } from "@/components/core/search-field";
 
<SearchFieldRoot>
  <Label>Email</Label>
  <InputRoot>
    <SearchIcon />
    <Input />
    <Button slot="clear">
      <XIcon />
    </Button>
  </InputRoot>
  <Description>Enter your search query.</Description>
</SearchFieldRoot>;

Options

Label

A visual label can be provided for the SearchField using the label prop or a hidden label using aria-label prop.

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

Description

A description can be supplied to a SearchField via the description prop. The description is always visible unless the isInvalid prop is true and an error message is provided.

<SearchField label="Search" description="Enter your search query." />

Error message

An errorMessage can be supplied to a SearchField, which will be displayed when the isInvalid prop is set to true.

<SearchField
  label="Search"
  isInvalid
  errorMessage="Please fill out this field."
/>

Size

Use the size prop to control the size of the SearchField. The default size is "md".

<SearchField size="sm" />
<SearchField size="md" />
<SearchField size="lg" />

Disabled

Use the isDisabled prop to disable the SearchField.

<SearchField isDisabled />

ReadOnly

The isReadOnly boolean prop makes the SearchField's text content immutable. Unlike isDisabled, the SearchField remains focusable and the contents can still be copied.

<SearchField isReadOnly />

Required

Use the isRequired prop to mark the SearchField as required. Use the necessityIndicator prop to control the visual style of the required state.

<SearchField label="Search" isRequired />
<SearchField label="Search" isRequired necessityIndicator="icon" />
<SearchField label="Search" isRequired necessityIndicator="label" />
<SearchField label="Search" necessityIndicator="label" />

Uncontrolled

Use the defaultValue prop to set the default input value.

<SearchField defaultValue="Marvel movies" />

Controlled

Use the value and onChange props to control the value of the input.

const [inputValue, setInputValue] = React.useState("Marvel movies");
return <SearchField value={inputValue} onChange={setInputValue} />;

Composition

If you need to customize things further, you can drop down to the composition level.

<SearchFieldRoot>
  <Label>Search</Label>
  <InputRoot prefix={<SearchIcon />}>
    <Input />
  </InputRoot>
  <Description>Enter your search query.</Description>
</SearchFieldRoot>

API Reference