<script lang="ts">
	import { Input } from 'stwui';

	const email = "svg-path";
	const phone = "svg-path";
	const lock = "svg-path";
</script>

<Input name="input-1" placeholder="Basic" allowClear />

<Input name="input-2" allowClear>
	<Input.Label slot="label">Label</Input.Label>
	<Input.Leading slot="leading" data={email} />
	<Input.Trailing slot="trailing" data={phone} />
</Input>

<Input
	name="input-3"
	error="There has been an error"
	handleLeadingClick={() => console.log('clicking leading')}
>
	<Input.Label slot="label">Label</Input.Label>
	<Input.Leading slot="leading" data={email} />
	<Input.Trailing slot="trailing" data={phone} />
</Input>

<Input type="password" name="input-4" showPasswordToggle>
	<Input.Label slot="label">Password</Input.Label>
	<Input.Leading slot="leading" data={lock} />
</Input>