@purpurds/text-field

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

import * as TextFieldStories from "./src/text-field.stories"; import packageInfo from "./package.json";

TextField

Version {packageInfo.version}

Showcase

Properties

Except for the props below, all "native" input attributs are also valid props. The only exceptions are:

• type - Restricted to "email" | "number" | "password" | "search" | "tel" | "text"
• id - Required

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 { TextField } from "@purpurds/purpur";

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

  return (
    <TextField
      value={value}
      onChange={setValue}
      onClear={() => setValue("")}
      clearButtonAllyLabel="Clear"
    />
  );
};