## Examples

### Basic text input group 

A basic text input group updates its contents as users enter text.


import TextInputGroupBasic from "./TextInputGroupBasic.tsx?raw"

<LiveExample src={TextInputGroupBasic} />

### Disabled text input group

To prevent users from making edits to a text input group, you can disable it using `isDisabled`.


import TextInputGroupDisabled from "./TextInputGroupDisabled.tsx?raw"

<LiveExample src={TextInputGroupDisabled} />

### With icon and utilities

To help users identify the purpose of an input group, you can add an icon. To do this, import your icon and pass it to `icon` within `<TextInputGroupMain>`.

You can also add additional actions or utilities via `<TextInputGroupUtilities>`. The following example includes a clear button that allows users to remove their previous input. 


import TextInputGroupUtilitiesAndIcon from "./TextInputGroupUtilitiesAndIcon.tsx?raw"

<LiveExample src={TextInputGroupUtilitiesAndIcon} />

### With validation

You can add a validation status to a `<TextInputGroup>` by passing the `validated` property with a value of either "success", "warning", or "error".


import TextInputGroupWithStatus from "./TextInputGroupWithStatus.tsx?raw"

<LiveExample src={TextInputGroupWithStatus} />

### With filters

When a text input group is used within a data view, like a table, you can nest filter labels within the group. To do this, pass a `<LabelGroup>` to `<TextInputGroupMain>`, with all of the labels that a user has selected. Users can interact with these labels as needed.


import TextInputGroupFilters from "./TextInputGroupFilters.tsx?raw"

<LiveExample src={TextInputGroupFilters} />