> ## 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.

# InputGroup

> Add prefixes, suffixes, and actions around a text input.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <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" allow="clipboard-write" 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" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`InputGroup` gives an [Input](/ui/primitives/input/input) a shared border and optional leading or trailing content. Set `size` on the group to size the container and provide a default for its input. Explicit child size takes precedence over that default; the group still controls the shared layout height.

<StoryEmbed storyId="ui-input-inputgroup--display" title="InputGroup example" height={140} />

## Usage

```tsx theme={null}
import { Field, Input, InputGroup } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const WebsiteField = () => (
  <Field.Root name="website">
    <Field.Label>Website</Field.Label>
    <InputGroup
      startElement={
        <Text render={<span />} aria-hidden>
          https://
        </Text>
      }
    >
      <Input placeholder="example.com" />
    </InputGroup>
    <Field.Description>Enter the domain without https://.</Field.Description>
  </Field.Root>
);
```

`startElement` and `endElement` accept React nodes. Prefixes and suffixes are visual content; the input's submitted value contains only what the user enters.

## Visual choices

Compare prefix, suffix, and combined adornments at both input sizes. The group shares its size with the input.

<StoryEmbed storyId="ui-input-inputgroup--catalog" title="Visual choices for input group" height={300} />

## Anatomy

Place the input inside `InputGroup` and keep field labels and messages outside the shared border.

```text theme={null}
Field.Root
├── Field.Label
├── InputGroup
│   └── Input
└── Field.Description
```

| Part or slot | Requirement | Purpose |
| - | - | - |
| `InputGroup` | Required | Supplies the shared border, layout, and size. |
| `Input` as `children` | Required | Owns the input value, native attributes, and editing behavior. |
| `startElement` | Optional prop | Adds a prefix, icon, or other content before the input. |
| `endElement` | Optional prop | Adds a suffix or action after the input. |
| `Field.Root`, `Label`, `Description`, `Error` | Optional composition | Associates a label, helper text, and validation feedback with the input. |

`startElement` and `endElement` are React node props, not separate components. `InputGroup` does not supply a label or manage validation. Give the input an accessible name, either through `Field.Label` or its own labeling attributes.

## Trailing action

```tsx theme={null}
import { useState } from 'react';
import { Button, Field, Input, InputGroup } from 'twenty-ui/primitives/input';

export const PasswordField = () => {
  const [visible, setVisible] = useState(false);

  return (
    <Field.Root name="password">
      <Field.Label>Password</Field.Label>
      <InputGroup
        endElement={
          <Button
            type="button"
            aria-label={visible ? 'Hide password' : 'Show password'}
            variant="ghost"
            size="sm"
            onClick={() => setVisible(!visible)}
          >
            {visible ? 'Hide' : 'Show'}
          </Button>
        }
      >
        <Input
          type={visible ? 'text' : 'password'}
          autoComplete="current-password"
        />
      </InputGroup>
    </Field.Root>
  );
};
```

Put labels, validation, and value handling on the field or input. Give adornment buttons their own accessible names and use `type="button"` when they should not submit the form. The group supports `sm` and `md` sizes and defaults to `md`.

## Customize the layout

Native props, `className`, `style`, `render`, and `ref` target the layout div. A custom `render` element receives the layout props and children. Keep the supplied ref on that layout element.

Put `value`, `defaultValue`, `onValueChange`, `name`, `required`, `readOnly`, `disabled`, and the native control ref on `Input`. The group does not manage input state or replace Field label association.

## Props

The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.

<ParamField body="endElement" type="ReactNode">
  Content rendered after the input, such as a suffix or a button.
</ParamField>

<ParamField body="ref" type="Ref<HTMLDivElement>">
  Ref to the layout element, a div by default.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>">
  Customizes the layout element. Forward its props, children and ref. Native control props belong on the child input.
</ParamField>

<ParamField body="size" type="&#x22;md&#x22; | &#x22;sm&#x22;" default="md">
  Visual size of the layout and default size for inputs that omit size. Defaults to md.
</ParamField>

<ParamField body="startElement" type="ReactNode">
  Content rendered before the input, such as a prefix or an icon.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.