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.

/routes/forms/numbers/+page.svelte

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

<NumberInput value={0} min={0} step={10} label="My Number" class="w-md" />

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';
</script>

<fieldset class="ctrl-group" style="width: fit-content">
	<legend>Some toggles</legend>
	<Toggle checked={false} label="Guides" />
	<Toggle checked={true} label="Image" />
	<Toggle checked={true} label="Cut marks" />
</fieldset>
Some toggles