Input

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

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

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 sizes its input. The default size is md; use sm for a compact field. Set size on the group: a grouped input stretches to the group’s height, so its own size has no visible effect.

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

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, the group’s size applies.

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.

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

Callback fired when the value changes. Use when controlled.

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

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

"sm" | "md"

Visual size of the input. Inside an InputGroup, the group’s size applies.

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

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

string | number | readonly string[]

The value of the input. Use when controlled.

Overview

Apps

API

Self-Host

Contribute

UI Library

Uncontrolled state

Controlled state

Add an adornment

Props

​Uncontrolled state

​Controlled state

​Add an adornment

​Props

Uncontrolled state

Controlled state

Add an adornment

Props