SearchInput

Basic search input field with clear button.

#
Documentation

#
Usage

The SearchInput component extends the Input component with some additional addons.

import { SearchInput } from "@optiaxiom/react";
 
export function App() {
  return <SearchInput placeholder="Enter text..." w="240" />;
}

#
Disabled state

Enable the disabled prop to toggle the disabled state of the input field.

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

#
Controlled

Use the value and defaultValue props to toggle between controlled and uncontrolled usage. And combine it with onChange to listen for changes to the input field.

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="240"
      />
 
      <Flex flexDirection="row">
        <Button
          onClick={() => {
            setValue("sample");
            ref.current?.focus();
          }}
        >
          Set Value
        </Button>
 
        <Button disabled={!value} onClick={() => setValue("")}>
          Reset
        </Button>
      </Flex>
    </Flex>
  );
}

#
Props

#
`SearchInput`

Supports all Input props in addition to its own.

Name	Type
asChild	`false \| true`

#
Changelog

#
0.1.0

Added component

RadioGroup Switch