Input

Basic text field for capturing user input.

#
Documentation

#
Usage

Input label

Description

Error

Label

Required

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>
  );
}

#
Sizes

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

Size

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.

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

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

#
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
size Control the size of the input. "md" \| "lg" \| "xl" Default: md

#
Changelog

#
0.1.0

Added component

Indicator Link