Input

Overview

Input renders a text input and accepts native input attributes such as type, name, required, disabled, and autoComplete.

Usage

Uncontrolled state

Use defaultValue to set the initial email address. The input owns subsequent changes.

import { Field, Input } from 'twenty-ui/primitives/input';

export const EmailField = () => (
  <Field.Root>
    <Field.Label>Email</Field.Label>
    <Input
      name="email"
      type="email"
      autoComplete="email"
      defaultValue="alex@example.com"
    />
    <Field.Description>Use your work email address.</Field.Description>
  </Field.Root>
);

Visual choices

Compare small and medium inputs in their default, focused, invalid, and disabled states. Use validation feedback alongside invalid styling.

Plain appearance

Use variant="plain" inside an existing row or surface. It removes the fill, border, rounded corners and padding and uses natural height. The parent supplies spacing and row dimensions. Text, placeholder and disabled styling remain shared. The blue outline follows the browser’s native :focus-visible behavior. For text controls this can include pointer focus and autofocus as well as keyboard focus. Invalid state uses a danger outline without changing layout.

import { Field, Input } from 'twenty-ui/primitives/input';

export const InlineSubject = () => (
  <Field.Root>
    <Field.Label>Subject</Field.Label>
    <Input variant="plain" placeholder="Add a subject" />
  </Field.Root>
);

InputGroup automatically gives its input the plain appearance and keeps the group as the only focus and validation frame. Its sm and md heights remain 24px and 32px. Standalone plain inputs do not use the fixed height associated with size.

Controlled state

Pass value and update it with onValueChange to own the same email address in React state. The callback receives the next string value and event details.

import { useState } from 'react';
import { Field, Input } from 'twenty-ui/primitives/input';

export const EmailField = () => {
  const [email, setEmail] = useState('alex@example.com');

  return (
    <Field.Root>
      <Field.Label>Email</Field.Label>
      <Input
        name="email"
        type="email"
        autoComplete="email"
        value={email}
        onValueChange={setEmail}
      />
      <Field.Description>Use your work email address.</Field.Description>
    </Field.Root>
  );
};

Add an adornment

InputGroup owns the surrounding border and layout height. Input size resolves from the explicit child size, then the group default, then md. The grouped input stretches within the shared border, so use the group’s size to change the overall field height.

import { IconSearch } from 'twenty-ui/icon';
import { Input, InputGroup } from 'twenty-ui/primitives/input';

export const CompactSearch = () => (
  <InputGroup size="sm" startElement={<IconSearch size={16} aria-hidden />}>
    <Input aria-label="Search contacts" />
  </InputGroup>
);

Native control and wrapper customization

Native attributes, handlers, className, style, and ref target the input. The ref receives an HTMLInputElement. Use render to compose another input component and forward the supplied props and ref to its native input. onChange receives a React change event for the native input. onValueChange(value, details) receives the next string and Base UI event details, including event, reason, cancel, and allowPropagation. The event targets the input. Canceling the details preserves Base UI’s validation policy; it does not undo a native edit. Controlled callers decide which value to commit. Put layout styles, attributes, and refs on InputGroup when customizing the surrounding wrapper. The group owns no value. Native name, form, required, readOnly, disabled, submission, and reset behavior remain on the input, with Field naming and validation supplied through Field.Root.

Props

The reference includes component-specific and inherited Base UI props. Native input attributes are also accepted. A standalone input defaults to md; inside a group, an omitted input size inherits the group’s size.

string | ((state: InputState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

string | number | readonly string[]

The default value of the input. Use when uncontrolled.

boolean

default:"true"

Set false to hide the focus border or outline while keeping errors visible. Defaults to true. InputGroup controls grouped focus styling.

((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)

Receives the next string value and Base UI details, including the native event, reason and cancellation methods.

Ref<HTMLInputElement>

Ref to the native input element.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, InputState>

Composes the native input with a custom element or render callback. Forward the supplied props and ref to an input.

"md" | "sm"

Visual size. Explicit input size takes precedence over the InputGroup default, then md applies. Group layout still sets the surrounding height.

CSSProperties | ((state: InputState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

"end" | "start"

Aligns text to the logical start or end of the input. Follows the text direction.

string | number | readonly string[]

The value of the input. Use when controlled.

"default" | "plain"

default:"default"

default keeps the field frame. plain removes fill, border, radius and padding and uses natural height. Its outline follows native :focus-visible, including pointer focus or autofocus on text inputs; invalid state uses a danger outline. InputGroup always owns the grouped frame.

Developers

Apps

API

Self-Host

Contribute

UI Library

Overview

Usage

Uncontrolled state

Visual choices

Plain appearance

Controlled state

Add an adornment

Native control and wrapper customization

Props

​Overview

​Usage

​Uncontrolled state

​Visual choices

​Plain appearance

​Controlled state

​Add an adornment

​Native control and wrapper customization

​Props

Overview

Usage

Uncontrolled state

Visual choices

Plain appearance

Controlled state

Add an adornment

Native control and wrapper customization

Props