@purpurds/search-field v5.24.1

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as SearchFieldStories from "./src/search-field.stories"; import packageInfo from "./package.json";

SearchField

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

import { useState } from "react";
import { IconSearch, SearchField } from "@purpurds/purpur";

export const MyComponent = () => {
  const [value, setValue] = useState("");

  return (
    <SearchField
      clearButtonAllyLabel="Clear"
      value={value}
      onChange={setValue}
      onClear={() => setState("")}
    >
      <SearchField.Button variant="primary" iconOnly aria-label="Search">
        <IconSearch size="xs" />
      </SearchField.Button>
    </SearchField>
  );
};