Container

Container adds layout and identity to input elements. It provides a canonical way to add labels, descriptions and validation to inputs.

Examples

Basic usage

The Container component provides layout for the input. It also provides a unique input id for each instance to associate labels with inputs.

<script>
	import { Container } from '@kwangure/strawberry/default/input/container';
</script>

<Container let:inputId>
	<label slot='label' for={inputId}>
		This is the input label
	</label>
	<input id={inputId} placeholder="I can say anything!"/>
</Container>

Hints and validation

Container simplifies displaying input hints and validating inputs. The provided validate action uses the built-in input HTML ValidityState API , which provides internationalized errors for dozens of languages.

Alternatively, you may use custom validation by providing an object to validate with the following signature:

{
	error: (errorCode: string, input: HTMLInputElement) => string,
	invalid: (input: HTMLElement) => string
}

If the input satisfies the built-in validation constraints, invalid(input) is called and returns an error code, then error(errorCode, input) is called and returns a string that is the error message. If the input failed built-in validation, only error(input.validity.<property>, input) is called with the name of the built-in Validity state property it failed. Read more about the validity state API on MDN for details about input validation.

<script>
	import { Container } from '@kwangure/strawberry/default/input/container';
	import { validate } from '@kwangure/strawberry/actions/validate.js';

	/** @type {import('@kwangure/strawberry/actions').Action<HTMLInputElement>}*/
	const _validate = (node) => validate(node, {
		invalid: (input) => (input.value === 'hello' ? 'customError' : ''),
		error: (error) => (error === 'customError' ? 'world' : ''),
	});

</script>

<Container let:hintId let:validationMessage>
	<input placeholder="I can say anything!" minlength="3"
		aria-describedby={hintId} required use:_validate/>
	<span slot='hint' id={hintId} class:invalid={validationMessage}>
		{#if validationMessage}
			{validationMessage}
		{:else}
			Required field with minimum 3 characters.
			Type hello to get a custom error.
		{/if}
	</span>
</Container>

<style>
	.invalid {
		color: red;
	}
</style>

Postfix container

The number input provides a Postfix element to enable stepping the input value using a pointer.

<script>
	import { Container } from '@kwangure/strawberry/default/input/container';
	import { Postfix } from '@kwangure/strawberry/default/input/number';
</script>

<Container let:inputId>
	<label for={inputId} slot="label">
		Use the postfix to step through numbers
	</label>
	<input id={inputId} placeholder="3.14" type='number'/>
	<Postfix/>
</Container>

Textarea

<Container/> also supports <textarea/> elements.

<script>
	import { autosize } from '@kwangure/strawberry/actions/autosize';
	import { Container } from '@kwangure/strawberry/default/input/container';
</script>

<Container>
	<textarea use:autosize/>
</Container>