Input with Icons and labels

[pehcastro]

I'm making a neobrutalism version of shadcn-svelte and while working on inputs I had to change the component a bit to allow new props.

As you can see this is how it looks, you can place labels or icons with that.

change ui/input/input.svelte to:

<script lang="ts">
	import type { HTMLInputAttributes } from 'svelte/elements';
	import type { InputEvents } from './index.js';
	import { cn } from '$lib/utils.js';

	type $$Props = HTMLInputAttributes & {
		withIcon?: boolean;
		iconPosition?: 'left' | 'right';
		withLabel?: boolean;
		labelContent?: string;
		labelPosition?: 'left' | 'right';
	};
	type $$Events = InputEvents;

	let className: $$Props['class'] = undefined;
	export let value: $$Props['value'] = undefined;
	export let withIcon: $$Props['withIcon'] = false;
	export let iconPosition: $$Props['iconPosition'] = 'left';
	export let withLabel: $$Props['withLabel'] = false;
	export let labelContent: $$Props['labelContent'] = '';
	export let labelPosition: $$Props['labelPosition'] = 'right';
	export { className as class };

	// Workaround for https://github.com/sveltejs/svelte/issues/9305
	// Fixed in Svelte 5, but not backported to 4.x.
	export let readonly: $$Props['readonly'] = undefined;
</script>

<div class={cn('relative', className)}>
	{#if withIcon && iconPosition === 'left'}
		<div class="absolute inset-y-0 left-0 flex items-center pl-3">
			<slot name="icon" />
		</div>
	{/if}
	{#if withLabel && labelPosition === 'left'}
		<div class="absolute inset-y-0 left-0 flex items-center pl-3">
			<span class="text-xs uppercase font-semibold text-gray-500">{labelContent}</span>
		</div>
	{/if}
	<input
		class={cn(
			'flex h-10 w-full rounded-base border-2 text-text dark:text-darkText font-base selection:bg-main selection:text-black border-border dark:border-darkBorder bg-white dark:bg-darkBg px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
			withIcon && iconPosition === 'left' && 'pl-10',
			withIcon && iconPosition === 'right' && 'pr-10',
			withLabel && labelPosition === 'left' && 'pl-16',
			withLabel && labelPosition === 'right' && 'pr-16'
		)}
		bind:value
		{readonly}
		on:blur
		on:change
		on:click
		on:focus
		on:focusin
		on:focusout
		on:keydown
		on:keypress
		on:keyup
		on:mouseover
		on:mouseenter
		on:mouseleave
		on:mousemove
		on:paste
		on:input
		on:wheel|passive
		{...$$restProps}
	/>
	{#if withIcon && iconPosition === 'right'}
		<div class="absolute inset-y-0 right-0 flex items-center pr-3">
			<slot name="icon" />
		</div>
	{/if}
	{#if withLabel && labelPosition === 'right'}
		<div class="absolute inset-y-0 right-0 flex items-center pr-3">
			<span class="text-xs uppercase font-semibold text-gray-500">{labelContent}</span>
		</div>
	{/if}
</div>

usage

<Input withLabel labelContent="BTC" labelPosition="right" placeholder="22" />

<Input withLabel labelContent="USD" labelPosition="left" placeholder="Enter amount" />

<Input withIcon iconPosition="right">
	<svelte:fragment slot="icon">
		<MoneyIcon />
	</svelte:fragment>
</Input>

<Input withIcon iconPosition="left">
          <svelte:fragment slot="icon">
		<FilterIcon />
          </svelte:fragment>
</Input>

[shyakadavis]

Hello @pehcastro ,

This is really neat. I love neobrutalistic sites so much. Please do share a link when it's live. Would love to have a look. 🙂

Wanted to also share something similar I did with inputs with icons:

• Live: https://geist.shyakadavis.me/input#affix-and-suffix
• Code: https://github.com/shyakadavis/geist/blob/main/src/lib/components/ui/input/input.svelte

Cheers.

[pehcastro]

wow, this is awesome, you did a nice job. Next project I'll give it a try.