TextInput.svx

---
components: ["TextInput", "TextInputSkeleton", "FluidTextInputSkeleton"]
description: Text inputs provide a single-line field for short text like usernames or search terms, with support for various sizes and states.
---

<script>
  import { TextInput, TextInputSkeleton, FluidTextInputSkeleton, TooltipIcon } from "carbon-components-svelte";
  import Information from "carbon-icons-svelte/lib/Information.svelte";
</script>

## Basic

Create a basic text input with a label and placeholder text.

<TextInput labelText="User name" placeholder="Enter user name..." />

## Helper text

Add helper text below the input to provide additional context or instructions.

<TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />

## Hidden label

Hide the label visually with `hideLabel`. The label remains available to screen readers.

<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />

## Custom label

Use the `labelChildren` slot to provide custom label content.

<TextInput labelText="" placeholder="Enter user name...">
  <strong slot="labelChildren">User name</strong>
</TextInput>

## Light

Use the light variant for light-themed backgrounds with `light`.

<TextInput light labelText="User name" placeholder="Enter user name..." />

## Fluid

Use the fluid variant with `fluid`, which embeds the label
inside the field. Fluid text inputs can be used standalone or inside
[FluidForm](/components/FluidForm), where the fluid variant is applied
automatically. The fluid variant cannot be combined with the inline variant.

<TextInput fluid labelText="User name" placeholder="Enter user name..." />

### Custom label

Use the `labelChildren` slot to render custom label content, such as a
tooltip icon.

<TextInput fluid labelText="User name" placeholder="Enter user name...">
  <svelte:fragment slot="labelChildren">
    User name
    <TooltipIcon tooltipText="Your user name is associated with your email." icon={Information} />
  </svelte:fragment>
</TextInput>

### Invalid

Fluid text inputs display the error message inside the field boundary. Long
messages wrap to multiple lines.

<TextInput fluid invalid invalidText="User name is already taken. Please choose a different name that is not in use by another account on this system." labelText="User name" placeholder="Enter user name..." />

### Warning

<TextInput fluid warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />

### Disabled

Invalid and warning states are not displayed while the input is disabled.

<TextInput fluid disabled invalid invalidText="User name is already taken." labelText="User name" placeholder="Enter user name..." />

### Read-only

Invalid and warning states are not displayed while the input is read-only.

<TextInput fluid readonly warn warnText="Your user name is different from your log in ID." labelText="User name" value="IBM" />

### Skeleton

Display a loading skeleton for the fluid text input variant.

<FluidTextInputSkeleton />

## Inline

Use the inline variant to display the label and input on the same line with `inline`.

<TextInput inline labelText="User name" placeholder="Enter user name..." />

### Custom label

Use the `labelChildren` slot to provide custom inline label content.

<TextInput inline labelText="" placeholder="Enter user name...">
  <strong slot="labelChildren">User name</strong>
</TextInput>

## Sizes

Set `size` to control input height. The default is `md`.

### Extra-large

Use the extra-large size for more prominent inputs by setting `size` to `"xl"`.

<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />

### Small

Use the small size for more compact inputs by setting `size` to `"sm"`.

<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />

### Extra-small

Use the extra-small size for the most compact inputs by setting `size` to `"xs"`.

<TextInput size="xs" labelText="User name" placeholder="Enter user name..." />

## States

Reflect validation and interaction states.

### Invalid

Indicate an invalid state with an error message by setting `invalid` and providing `invalidText`.

<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />

### Warning

Indicate a warning state with a message by setting `warn` and providing `warnText`.

<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />

### Disabled

Disable the input to prevent user interaction with `disabled`.

<TextInput disabled labelText="User name" placeholder="Enter user name..." />

### Read-only

Display a non-editable value with `readonly`.

<TextInput readonly labelText="User name" value="IBM" />

## Skeleton

Show a loading state with the default skeleton variant.

<TextInputSkeleton />

### Without label

Show a loading state without a label with `hideLabel`.

<TextInputSkeleton hideLabel />