Skip to Content
ComponentsInput

Input

Basic text field for capturing user input.

Documentation

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

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

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

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

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

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

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

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

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

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

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

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

SearchInput

Basic search input field with clear button.

Textarea

Multi-line text field for capturing user input.

Props

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

  • Added component
Last updated on