Field | tcpsystems/ui

Examples

Basic label and hint

Service name

Used as the hostname for internal routing

Basic label and hint.svelte

<script lang="ts">
	import Field from '@tcpsystems/ui/foundation/Field';
	import Input from '@tcpsystems/ui/foundation/Input';
	let serviceName = $state('tcpsystems-api');
</script>

<Field label="Service name" hint="Used as the hostname for internal routing">
	{#snippet control(props)}
		<Input {...props} bind:value={serviceName} />
	{/snippet}
</Field>

Validation

Service name (optional)

Must be a valid DNS name

Name must start with a letter and contain only lowercase letters, numbers, and hyphens

Validation.svelte

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

<Field label="Service name" hint="Must be a valid DNS name" error="Name must start with a letter and contain only lowercase letters, numbers, and hyphens" optional>
	{#snippet control(props)}
		<Input {...props} bind:value={serviceName} invalid="true" />
	{/snippet}
</Field>

API

Import

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

Prop	Type	Default
`mode?`	`'field' \| 'count'`	`'field'`
`label?`	`string`	`''`
`hint?`	`string`	none
`error?`	`string`	none
`optional?`	`boolean`	`false`
`value?`	`string`	`''`
`max?`	`number`	`0`
`id?`	`string`	none

Snippet
`control`

Hook	Kind
`.tcp-char-count`	Root class
`data-state`	Data attribute