@purpurds/search-field
v4.3.0
Published
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
Downloads
2,163
Readme
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>
);
};