Input Container

The input 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>

<Container let:inputId>
	<label slot='label' for={inputId}>
		Pick a pizza toping.
	</label>
	<select id={inputId}>
		<option>Pineapple</option>
		<option>Pepperoni</option>
		<option>Peppers</option>
	</select>
</Container>

This is the input label

Pick a pizza toping.

Postfix

The number input provides a <Postfix/> component 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} value="3.14" type='number'/>
	<Postfix/>
</Container>

Use the postfix to step through numbers

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 value="Hello there..."/>
</Container>