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="224" />;
}

#
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="224" />;
}

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

#
Related

Input

Basic text field for capturing user input.

Textarea

Multi-line text field for capturing user input.

#
Props

#
SearchInput

Supports all Input props in addition to its own. Renders a <div> element but forwards all props to an inner <input> element.

Prop
addonAfter Display content inside the input at the end. ReactNode
addonBefore Display content inside the input at the start. ReactNode
addonPointerEvents When this prop is set to `none` clicking empty space inside the addon will focus the input box. "none" \| "auto"
appearance Control the appearance of the input. "number" \| "default"
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
disabled Whether the input is disabled. false \| true
error Whether to show the input error state. false \| true
htmlSize Control the native input `size` attribute. number
onValueClear () => void
size Control the size of the input. "md" \| "lg" \| "xl"

#
Changelog

#
0.1.0

Added component

RadioGroup SegmentedControl