SearchInput

import type { ComponentPropsWithoutRef } from "react";
 
import { Field, SearchInput } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Search label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
    >
      <SearchInput placeholder="Enter text..." w="224" />
    </Field>
  );
}

import { SearchInput } from "@optiaxiom/react";
 
export function App() {
  return <SearchInput defaultValue="Some disabled value" disabled w="224" />;
}

import { Button, Flex, SearchInput } from "@optiaxiom/react";
import { useRef, useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
  const ref = useRef<HTMLInputElement>(null);
 
  return (
    <Flex>
      <SearchInput
        onChange={(event) => setValue(event.target.value)}
        ref={ref}
        value={value}
        w="224"
      />
 
      <Flex flexDirection="row">
        <Button
          onClick={() => {
            setValue("sample");
            ref.current?.focus();
          }}
        >
          Set Value
        </Button>
 
        <Button disabled={!value} onClick={() => setValue("")}>
          Reset
        </Button>
      </Flex>
    </Flex>
  );
}