small input field ui improvements

This commit is contained in:
Samuel Andert 2023-08-08 11:11:48 +02:00
parent 3b0640875e
commit 1240549cd4
3 changed files with 4 additions and 4 deletions

View File

@ -124,7 +124,7 @@
</script> </script>
<div class="p-6"> <div class="p-6">
<form on:submit|preventDefault={handleNext} on:keydown={handleKeyDown} class="w-full max-w-md"> <form on:submit|preventDefault={handleNext} on:keydown={handleKeyDown} class="w-full">
{#if !$state.matches('submitting')} {#if !$state.matches('submitting')}
<div class="mb-4"> <div class="mb-4">
{#if $errors[fields[$state.context.currentField].name]} {#if $errors[fields[$state.context.currentField].name]}

View File

@ -15,12 +15,12 @@
<select <select
name={field.name} name={field.name}
bind:this={inputElement} bind:this={inputElement}
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500" class="select"
size="5"
bind:value={$form[field.name]} bind:value={$form[field.name]}
aria-invalid={$errors[field.name] ? 'true' : undefined} aria-invalid={$errors[field.name] ? 'true' : undefined}
{...constraints[field.name]} {...constraints[field.name]}
> >
<option value="">Select...</option>
<option value="apple">Apple</option> <option value="apple">Apple</option>
<option value="banana">Banana</option> <option value="banana">Banana</option>
<option value="coconut">Coconut</option> <option value="coconut">Coconut</option>

View File

@ -15,7 +15,7 @@
<textarea <textarea
name={field.name} name={field.name}
bind:this={inputElement} bind:this={inputElement}
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500" class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md textarea border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={$form[field.name]} bind:value={$form[field.name]}
aria-invalid={$errors[field.name] ? 'true' : undefined} aria-invalid={$errors[field.name] ? 'true' : undefined}
{...constraints[field.name]} {...constraints[field.name]}