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.
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.
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.
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.
Import from @uxf/ui/input.
| Export | Kind | Description |
|---|---|---|
Input | component | The input group wrapper. |
Input.Element | component | The <input> itself (InputElement). |
Input.LeftAddon / Input.RightAddon | component | Content attached outside the field border. |
Input.LeftElement / Input.RightElement | component | Content rendered inside the field, next to the input. |
Input.RemoveButton | component | A clear button that calls onChange(null). |
Input.ArrowIcon | component | A caret icon that rotates when isOpen. |
InputProps, InputElementProps, InputRemoveButtonProps, InputGroupSize, InputGroupVariant | types | — |
Input (InputProps)| Prop | Type | Default | Description |
|---|---|---|---|
children * | ReactNode | — | Must contain the Input.* parts; only recognised displayNames are rendered. |
variant | InputGroupVariant | "default" | Visual style (see Variants & states). |
size | InputGroupSize | "default" | "small", "default", or "large". |
isFocused | boolean | false | Forces the focused visual state. |
isInvalid | boolean | false | Forces the invalid visual state. |
isDisabled | boolean | false | Forces the disabled visual state. |
isReadOnly | boolean | false | Forces the read-only visual state. |
inputFocus | ReturnType<typeof useInputFocus> | — | Shares focus state with a parent (used by TextInput). |
customInputElementDisplayName | string | "UxfUiInputElement" | displayName treated as the main input, to swap in a custom element. |
className | string | — | Extra class on the group. |
style | CSSProperties | — | Inline style on the group. |
inputWrapperRef | Ref<HTMLDivElement> | — | Ref to the inner wrapper <div>. |
inputGroupRef | Ref<HTMLDivElement> | — | Ref to the outer group <div>. |
tabIndex | number | — | tabIndex on the wrapper. |
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.
| Prop | Type | Default | Description |
|---|---|---|---|
value * | string | — | Current value. |
onChange * | (value: string, event?) => void | — | Called with the new value. |
name * | string | — | Input name. |
type | "email" | "number" | "password" | "search" | "tel" | "text" | "url" | "time" | — | Native input type. |
placeholder | string | — | Placeholder text. |
isDisabled | boolean | false | Disables the input. |
isReadOnly | boolean | false | Makes the input read-only (also sets tabIndex={-1}). |
isInvalid | boolean | false | Sets aria-invalid. |
autoComplete | string | — | Native autocomplete. |
autoFocus | boolean | false | Focus on mount. |
inputMode | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | — | Virtual keyboard hint. |
id, form | string | — | Native attributes. |
maxLength, minLength | number | — | For text-like types. |
min, max, step, pattern | number | string | — | For type="number". |
onBlur, onFocus | FocusEventHandler | — | Focus handlers. |
onKeyDown, onPaste, onBeforeInput | event handler | — | Native events. |
aria-describedby, aria-invalid | — | — | Forwarded ARIA attributes. |
style | CSSProperties | — | Inline style on the <input>. |
* required
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.| Group | Values |
|---|---|
variant | default |
size | small, default, large |
InputGroupVariants / InputGroupSizes are open interfaces; a project can add values via module augmentation of @uxf/ui/input/theme (matching CSS required).
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.