> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Input

> A text input with native attributes, field integration, and two sizes.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

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

<StoryEmbed storyId="ui-input-input--default" title="Input example" height={240} />

## Uncontrolled state

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

```tsx theme={null}
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.

```tsx theme={null}
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.

```tsx theme={null}
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.

<ParamField body="className" type="string | ((state: InputState) => string | undefined)">
  CSS class applied to the element, or a function that
  returns a class based on the component's state.
</ParamField>

<ParamField body="defaultValue" type="string | number | readonly string[]">
  The default value of the input. Use when uncontrolled.
</ParamField>

<ParamField body="onValueChange" type="((value: string, eventDetails: { reason: &#x22;none&#x22;; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)">
  Callback fired when the `value` changes. Use when controlled.
</ParamField>

<ParamField body="render" type="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.
</ParamField>

<ParamField body="size" type="&#x22;sm&#x22; | &#x22;md&#x22;">
  Visual size of the input. Inside an `InputGroup`, the group's size applies.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: InputState) => CSSProperties | undefined)">
  Style applied to the element, or a function that
  returns a style object based on the component's state.
</ParamField>

<ParamField body="value" type="string | number | readonly string[]">
  The value of the input. Use when controlled.
</ParamField>