Input

Low-level, controlled input group primitive. Input renders the styled wrapper (border, focus/invalid/disabled states, addons and inline elements); the actual <input> is rendered by the Input.Element child.

When to use

Reach for Input when you need to compose a custom text control layout — combining the field with addons, inline icons, remove buttons, etc. — outside the higher-level fields.

• For a ready-made labelled field with helper/error text, use TextInput (or @uxf/form/text-input inside a form). TextInput is built on top of this primitive.
• Input is a composition primitive: it inspects its children by displayName and only renders the recognised parts (Input.Element, Input.LeftAddon, Input.RightAddon, Input.LeftElement, Input.RightElement). It does not render a <label> or error message.

There is no @uxf/form twin.

Usage

import { Input } from "@uxf/ui/input";
import { useState } from "react";

function Example() {
    const [value, setValue] = useState("");

    return (
        <Input>
            <Input.LeftAddon>https://</Input.LeftAddon>
            <Input.Element name="website" onChange={setValue} placeholder="Placeholder" value={value} />
            <Input.RightAddon>.uxf.cz</Input.RightAddon>
        </Input>
    );
}

Input.Element.onChange receives the new value first, then the change event: (value: string, event) => void.

Exports

Import from @uxf/ui/input.

Props

Input (InputProps)

The forwarded ref points to the underlying <input>. The group's focus/invalid/disabled/read-only classes are applied if the prop is set on either Input or Input.Element.

Input.Element (InputElementProps)

Extends FormControlProps<string>, so it is fully controlled.

* required

Other parts

• Input.LeftAddon / Input.RightAddon — { children: ReactNode }. When children is a string, a --text modifier class is added.
• Input.LeftElement / Input.RightElement — { children?: ReactNode }.
• Input.RemoveButton — { onChange?: (value: Value | null) => void }. Renders a clear button that calls onChange(null) on click / Enter / Space.
• Input.ArrowIcon — { isOpen: boolean; iconName?: IconName }. Defaults to the caretDown icon and adds an "open" class when isOpen.

Variants & states

InputGroupVariants / InputGroupSizes are open interfaces; a project can add values via module augmentation of @uxf/ui/input/theme (matching CSS required).

Requirements

Import the component stylesheets once in your global CSS:

@import url("@uxf/ui/css/input-basic.css");
@import url("@uxf/ui/css/input.css");

If you render Input.RemoveButton or Input.ArrowIcon, also import the icon stylesheet:

@import url("@uxf/ui/css/icon.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.