Input

Basic text field for capturing user input.

Source

Want to skip the docs? Try our MCP Server

#
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 { Group, Input, Text } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Group flexDirection="column" gap="16">
      <Input onValueChange={setValue} value={value} />
      <Text fontSize="md">Input value: {value}</Text>
    </Group>
  );
}

Using onChange:

Input value:


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

#
Input types

Use the type prop to specify the type of data the input should accept. Common types include email, password, tel, url, and number.

Password

Phone number

Website

Number


import { Field, Group, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Field label="Email">
        <Input placeholder="name@example.com" type="email" />
      </Field>
      <Field label="Password">
        <Input placeholder="Enter password" type="password" />
      </Field>
      <Field label="Phone number">
        <Input placeholder="+1 (555) 000-0000" type="tel" />
      </Field>
      <Field label="Website">
        <Input placeholder="https://example.com" type="url" />
      </Field>
      <Field label="Number">
        <Input placeholder="0" type="number" />
      </Field>
    </Group>
  );
}

#
Required

Use the required prop on the Field component to mark an input as required. This adds a visual indicator and sets the appropriate ARIA attributes.

Note: This only provides visual feedback. For actual validation, use the native required attribute on the Input or a form validation library like react-hook-form.

Email addressRequired


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field label="Email address" required>
      <Input placeholder="name@example.com" type="email" />
    </Field>
  );
}

#
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

Use the error prop on the Field component to display validation errors. The error message will be shown below the input and the input will be styled accordingly.

Note: When you set the error prop on Field, it automatically sets the error state on the Input inside it. You don’t need to set error on both components.

Please enter a valid email address


import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field error="Please enter a valid email address" label="Email">
      <Input defaultValue="invalid-email" type="email" />
    </Field>
  );
}

#
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

#
Text addons

Use the addonBefore and addonAfter props to add text labels like currency symbols, units, or prefixes to your inputs.

Price

Discount

Weight

Website

https://

Username


import { Field, Group, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Field label="Price">
        <Input addonBefore="$" placeholder="0.00" type="number" />
      </Field>
      <Field label="Discount">
        <Input addonAfter="%" placeholder="0" type="number" />
      </Field>
      <Field label="Weight">
        <Input addonAfter="kg" placeholder="0" type="number" />
      </Field>
      <Field label="Website">
        <Input addonBefore="https://" placeholder="example.com" type="url" />
      </Field>
      <Field label="Username">
        <Input addonBefore="@" placeholder="username" />
      </Field>
    </Group>
  );
}

#
Interactive addons

You can also provide icons, buttons, or any other interactive element as addons.


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

#
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 { Group, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group gap="16">
      <Input defaultValue="Text value" />
      <Input appearance="number" defaultValue="23.50" />
    </Group>
  );
}

#
Character limit

Use the maxLength prop to limit the number of characters users can enter. Combine with a character counter in the Field description for better UX.

Project description

0/50


"use client";
 
import { Field, Input } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
  const maxLength = 50;
 
  return (
    <Field
      description={`${value.length}/${maxLength}`}
      label="Project description"
    >
      <Input
        maxLength={maxLength}
        onValueChange={setValue}
        placeholder="Enter description..."
        value={value}
      />
    </Field>
  );
}

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. Automatically set when used inside a Field component with an error prop. `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