small input field ui improvements
This commit is contained in:
parent
3b0640875e
commit
1240549cd4
@ -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]}
|
||||||
|
@ -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>
|
||||||
|
@ -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]}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user