TextInput

Usage

<script>
	import { TextInput } from 'bref-ui';
</script>

<label for="entry">Name</label>
<TextInput id="entry" name="entry" placeholder="Your name" />

Input types

Number input value: 12

Sizes and variants

Neutral and soft variants use quiet tonal fills, with a clear indicator when focused.

Playground

<script lang="ts">
	import { TextInput } from 'bref-ui';
	let value = $state('Hello');
	let lastChange = $state('Edit the field to inspect onChange.');
	let nativeEvents = $state(0);
</script>

<label for="playground-text-input">Editable input</label>
<TextInput
	id="playground-text-input"
	size="medium"
	variant="soft"
	glass={false}
	wide={false}
	disabled={false}
	readonly={false}
	icon={{ name: 'search', filled: false }}
	bind:value
	onChange={(next) => (lastChange = 'TextInput: ' + next)}
	oninput={() => nativeEvents++}
/>
<p role="status">{lastChange}</p>
<p>Bound value: {value}; native input events: {nativeEvents}</p>

Native form behavior

Native labels, IDs, names, constraints, events, form association and ARIA attributes pass through to the input. Use bind:value for its string value. No content snippet is used. The optional leading icon is decorative. Number inputs also expose a string value, including an empty string when cleared.

Submit the form to inspect its value.

Required fields use native validation on submission. Error styling follows native :user-invalid after interaction or submission; untouched required fields stay quiet. Use aria-invalid="true" for application errors.

This entry was not accepted. Check the value and try again.

Props