---
components: ["TextInput", "TextInputSkeleton"]
---

<script>
  import { TextInput, TextInputSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default

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

## With helper text

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

## Hidden label

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

## Light variant

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

## Inline variant

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

## Read-only variant

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

## Extra-large size

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

## Small size

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

## Invalid state

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

## Warning state

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

## Disabled state

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

## Skeleton

<TextInputSkeleton />

## Skeleton without label

<TextInputSkeleton hideLabel />