Input

Basic text field for capturing user input.

Source

#
Documentation

#
Usage

Input label

Description

Error

Label

Required


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

#
Controlled

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

Using onValueChange:

Input value:


"use client";
 
import { Flex, Input, Text } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Flex>
      <Input onValueChange={setValue} value={value} />
      <Text fontSize="md">Input value: {value}</Text>
    </Flex>
  );
}

Using onChange:

Input value:


"use client";
 
import { Flex, Input, Text } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Flex>
      <Input onChange={(event) => setValue(event.target.value)} value={value} />
      <Text fontSize="md">Input value: {value}</Text>
    </Flex>
  );
}

#
Sizes

Use the size prop to control the size of the input field.

Size


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Input } from "@optiaxiom/react";
 
export function App({
  size,
}: Pick<ComponentPropsWithRef<typeof Input>, "size">) {
  return <Input placeholder="Enter text..." size={size} />;
}

#
Error state

Enable the error prop to display the error state of the input field.


import { Input } from "@optiaxiom/react";
 
export function App() {
  return <Input defaultValue="Some invalid value" error />;
}

#
Disabled state

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


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

#
Read-only state

Enable the readOnly prop to display the read-only state of the input field.


import { Input } from "@optiaxiom/react";
 
export function App() {
  return <Input defaultValue="Some read-only value" readOnly />;
}

#
Addons

#
Left and right addons

Use the addonBefore and addonAfter prop to add icons, text, or any other element to the start or end of the input.


"use client";
 
import { Button, Flex, Input } from "@optiaxiom/react";
import { IconEye, IconEyeOff } from "@tabler/icons-react";
import { useState } from "react";
 
export function App() {
  const [hidden, setHidden] = useState(true);
 
  return (
    <Flex flexDirection={["column", "row"]}>
      <Input addonBefore="@" placeholder="Email" />
      <Input addonAfter="kg" placeholder="Weight" />
      <Input
        addonAfter={
          <Button
            appearance="subtle"
            icon={hidden ? <IconEye /> : <IconEyeOff />}
            onClick={() => setHidden((flag) => !flag)}
            rounded="full"
            size="sm"
          />
        }
        placeholder="Password"
        type={hidden ? "password" : "text"}
      />
    </Flex>
  );
}

#
Handling addon clicks

Use the addonPointerEvents prop to control whether clicking the addons focuses the input or not.

Addon pointer events


"use client";
 
import { Input } from "@optiaxiom/react";
import { type ComponentPropsWithoutRef } from "react";
 
export function App({
  addonPointerEvents = "none",
}: Pick<ComponentPropsWithoutRef<typeof Input>, "addonPointerEvents">) {
  return (
    <Input
      addonBefore="@"
      addonPointerEvents={addonPointerEvents}
      placeholder="Email"
    />
  );
}

#
Appearance

Use the appearance prop to select between the different input appearances.


"use client";
 
import { Flex, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Input defaultValue="Text value" />
      <Input appearance="number" defaultValue="23.50" />
    </Flex>
  );
}

#
Related

SearchInput

Basic search input field with clear button.

Textarea

Multi-line text field for capturing user input.

#
Props

#
Input

Supports all Box 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"` Default: `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`
`onValueChange` Handler that is called when the value changes. `(value: string) => void`
`size` Control the size of the input. `"md" \| "lg" \| "xl"` Default: `md`

#
Changelog

#
0.1.0

Added component