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

> Aggiungi prefissi, suffissi e azioni attorno a un input di testo.

## Panoramica

`InputGroup` assegna a un [Input](https://docs.twenty.com/it/ui/primitives/input/input.md) un bordo condiviso e contenuti iniziali o finali facoltativi. Imposta `size` sul gruppo per dimensionare il contenitore e fornire un valore predefinito per il relativo input. La dimensione esplicita dell'elemento figlio ha la precedenza su quel valore predefinito; il gruppo controlla comunque l'altezza del layout condiviso.

**Light**

[Esempio di InputGroup (light)](https://storybook.twenty.com/iframe.html?id=ui-input-inputgroup--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di InputGroup (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-inputgroup--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-inputgroup--display)

## Utilizzo

```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` e `endElement` accettano nodi React. I prefissi e i suffissi sono contenuti visivi; il valore inviato dell'input contiene solo ciò che l'utente inserisce.

## Opzioni visive

Confronta prefisso, suffisso e ornamenti combinati in entrambe le dimensioni dell'input. Il gruppo ha le stesse dimensioni dell'input.

**Light**

[Opzioni visive per il gruppo di input (light)](https://storybook.twenty.com/iframe.html?id=ui-input-inputgroup--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Opzioni visive per il gruppo di input (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-inputgroup--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-inputgroup--catalog)

## Anatomia

Inserisci l'input all'interno di `InputGroup` e mantieni le etichette e i messaggi dei campi all'esterno del bordo condiviso.

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

| Parte o slot | Requisito | Scopo |
| - | - | - |
| `InputGroup` | Obbligatorio | Fornisce il bordo condiviso, il layout e le dimensioni. |
| `Input` come `children` | Obbligatorio | Gestisce il valore dell'input, gli attributi nativi e il comportamento di modifica. |
| `startElement` | Prop opzionale | Aggiunge un prefisso, un'icona o altro contenuto prima dell'input. |
| `endElement` | Prop opzionale | Aggiunge un suffisso o un'azione dopo l'input. |
| `Field.Root`, `Label`, `Description`, `Error` | Composizione opzionale | Associa all'input un'etichetta, un testo di supporto e un feedback di convalida. |

`startElement` e `endElement` sono prop di nodi React, non componenti separati. `InputGroup` non fornisce un'etichetta né gestisce la convalida. Assegna all'input un nome accessibile, tramite `Field.Label` o i relativi attributi di etichettatura.

## Azione finale

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

Inserisci etichette, convalida e gestione dei valori nel campo o nell'input. Assegna ai pulsanti decorativi nomi accessibili propri e usa `type="button"` quando non devono inviare il modulo. Il gruppo supporta le dimensioni `sm` e `md` e usa `md` per impostazione predefinita.

## Personalizza layout

Le props native, `className`, `style`, `render` e `ref` si applicano al div del layout. Un elemento `render` personalizzato riceve le props del layout e i children. Mantieni il ref fornito su quell'elemento di layout.

Inserisci `value`, `defaultValue`, `onValueChange`, `name`, `required`, `readOnly`, `disabled` e il ref del controllo nativo in `Input`. Il gruppo non gestisce lo stato dell'input né sostituisce l'associazione con l'etichetta di Field.

## Props

Il riferimento viene generato dai tipi di componenti pubblici. Gli attributi nativi, inclusi i nomi accessibili e i gestori di eventi, sono accettati anche nelle parti che eseguono il rendering di elementi.

**endElement** `ReactNode`

Content rendered after the input, such as a suffix or a button.

**hasFocusRing** `boolean` (default: true)

Set false to keep the group border unchanged on focus. Defaults to true. Error styling remains visible.

**ref** `Ref\<HTMLDivElement\>`

Ref to the layout element, a div by default.

**render** `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.

**size** `"md" | "sm"` (default: md)

Visual size of the layout and default size for inputs that omit size. Defaults to md.

**startElement** `ReactNode`

Content rendered before the input, such as a prefix or an icon.


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