Input Elements

Text Input

For text inputs and similar (search, password, etc.), you can just use the input class.

/routes/forms/strings/+page.svelte

<label>
	<span>My Text</span>
	<input type="text" class="input" placeholder="Basic text input" />
</label>

Number Input

For number inputs, there is a custom Svelte component, wrapping a number input.

/routes/forms/numbers/+page.svelte

<script lang="ts">
	import { NumberInput } from '@leon8ix/jhana-ui';
</script>

<div class="input-group">
	<NumberInput value={0} min={0} step={10} label="My Number" class="w-md" />
	<NumberInput value={0} min={0} step={10} label="Disabled" class="w-md" disabled />
	<NumberInput value={0} min={0} step={10} label="Readonly" class="w-md" readonly />
</div>

Toggle

For toggles, there is a custom Svelte component, wrapping a checkbox input.

/routes/forms/toggles/+page.svelte

<script lang="ts">
	import { Toggle } from '@leon8ix/jhana-ui';

	let checked: [boolean, boolean, boolean] = $state([false, true, true]);
</script>

<fieldset class="ctrl-group" style="width: fit-content">
	<legend>
		Display
		<span class="o70">({checked.map(c => (c ? 'on' : 'off')).join(', ')})</span>
	</legend>
	<Toggle bind:checked={checked[0]} label="Guides" />
	<Toggle bind:checked={checked[1]} label="Image" />
	<Toggle bind:checked={checked[2]} label="Cut marks" />
</fieldset>
Display (off, on, on)

Radios

For radios, there is a custom Svelte component, wrapping a radio input.

/routes/forms/toggles/+page.svelte

<script lang="ts">
	import { Radio } from '@leon8ix/jhana-ui';

	let value = $state(1);
</script>

<fieldset class="ctrl-group" style="width: fit-content">
	<legend>
		Choose wisely
		<span class="o70">(<span class="numbers">{value}</span>)</span>
	</legend>
	<Radio name="foo" value={1} label="One" bind:group={value} />
	<Radio name="foo" value={2} label="Two" bind:group={value} />
	<Radio name="foo" value={3} label="Three" bind:group={value} />
</fieldset>
Choose wisely (1)