mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
989e0f4c65Use the native `bind:value` to fix two-way reactivity. As a result, "type" is read through `$$restProps` because it cannot be dynamic when using `bind:value`. Extend value type to include `null` for the "number" type. This is similar to how `NumberInput` works; `null` represents "no value."
43 lines
1.1 KiB
Svelte
43 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { TextInput, TextInputSkeleton } from "../types";
|
|
|
|
let value = null;
|
|
</script>
|
|
|
|
<TextInput
|
|
type="number"
|
|
labelText="User name"
|
|
placeholder="Enter user name..."
|
|
bind:value
|
|
on:input="{(e) => console.log(e.detail)}"
|
|
on:change="{(e) => (value = e.detail)}"
|
|
/>
|
|
|
|
<TextInput
|
|
labelText="User name"
|
|
helperText="Your user name is associated with your email"
|
|
placeholder="Enter user name..."
|
|
/>
|
|
|
|
<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
|
|
|
|
<TextInput light labelText="User name" placeholder="Enter user name..." />
|
|
|
|
<TextInput inline labelText="User name" placeholder="Enter user name..." />
|
|
|
|
<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
|
|
|
|
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
|
|
|
|
<TextInput
|
|
invalid
|
|
invalidText="User name is already taken. Please try another."
|
|
labelText="User name"
|
|
placeholder="Enter user name..."
|
|
/>
|
|
|
|
<TextInput disabled labelText="User name" placeholder="Enter user name..." />
|
|
|
|
<TextInputSkeleton />
|
|
|
|
<TextInputSkeleton hideLabel />
|