PasswordInput | tcpsystems/ui

Examples

Login password

Login form.svelte

<script lang="ts">
	import Field from '@tcpsystems/ui/foundation/Field';
	import PasswordInput from '@tcpsystems/ui/foundation/PasswordInput';
	let password = $state('');
</script>

<Field label="Login password">
	{#snippet control(props)}
		<PasswordInput {...props} bind:value={password} />
	{/snippet}
</Field>

Create password

Signup password.svelte

<script lang="ts">
	import PasswordInput from '@tcpsystems/ui/foundation/PasswordInput';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let password = $state('');
	const uid = $props.id();
</script>

<Stack>
	<label for={uid}>Create password</label>
	<PasswordInput id={uid} bind:value={password} showLabel="Show password" hideLabel="Hide password" />
</Stack>

API

Import

import PasswordInput from '@tcpsystems/ui/foundation/PasswordInput';

Prop	Type	Default
`kind?`	`'mono'`	none
`describedby?`	`string`	none
`invalid?`	`'true'`	none
`showLabel?`	`string`	`'Show password'`
`hideLabel?`	`string`	`'Hide password'`
`value?`	`native`	`$bindable()`

Hook	Kind
`.tcp-password`	Root class
`data-hide-label`	Data attribute
`data-kind`	Data attribute
`data-show-label`	Data attribute
`data-variant`	Data attribute