TextInput

Source code
Table of Contents

Usage

Default

<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

With helper text

Your user name is associated with your email
<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

Hidden label

<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

Light variant

<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

Inline

<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

Extra-large size

<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

Small size

<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

Invalid state

User name is already taken. Please try another.
<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

Disabled state

<script>
  import { TextInput } from "carbon-components-svelte";
</script>

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

Skeleton

<script>
  import { TextInputSkeleton } from "carbon-components-svelte";
</script>

<TextInputSkeleton />

Skeleton without label

<script>
  import { TextInputSkeleton } from "carbon-components-svelte";
</script>

<TextInputSkeleton hideLabel />
Table of Contents