> ## 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 = 120}) => <>
Open in Storybook
;
`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.
```tsx theme={null}
import { Field, Input } from 'twenty-ui/primitives/input';
export const EmailField = () => (
EmailUse your work email address.
);
```
## Visual choices
Compare small and medium inputs in their default, focused, invalid, and disabled states. Use validation feedback alongside invalid styling.
## 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 (
EmailUse your work email address.
);
};
```
## 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.
```tsx theme={null}
import { IconSearch } from 'twenty-ui/icon';
import { Input, InputGroup } from 'twenty-ui/primitives/input';
export const CompactSearch = () => (
}>
);
```
## 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.
CSS class applied to the element, or a function that
returns a class based on the component's state.
The default value of the input. Use when uncontrolled.
Receives the next string value and Base UI details, including the native event, reason and cancellation methods.
Ref to the native input element.
Composes the native input with a custom element or render callback. Forward the supplied props and ref to an input.
Visual size. Explicit input size takes precedence over the InputGroup default, then md applies. Group layout still sets the surrounding height.
Style applied to the element, or a function that
returns a style object based on the component's state.
The value of the input. Use when controlled.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.