-
Notifications
You must be signed in to change notification settings - Fork 946
Description
Package
v4.x
Description
In some cases, we need to have the label horizontally aligned with the field.
Today it's doable by customizing root, wrapper and container slots:
<UFormField
label="my field"
:ui="{
root: 'flex items-center justify-between',
wrapper: 'flex-2',
container: 'flex-3 mt-0',
}"
/>As you see, things like this not really comfortable when we need this for many fields, especially when this behavior is not desirable on the app-wise.
My suggestion would be to add an orientation prop which will trigger a compoundVariant and approximatively the same thing (apply flex, apply the corresponding flex direction and alignments).
The class mt-1 applied to container slot will probably no more desirable as we could apply a gap-1 with the vertical orientation.
One thing will remain for fine-tune the behavior: what flex property to apply (grow, shrink, self-alignment) ?
Additional context
By writing this feature request, it makes me think that #4250 would be a better choice as it will apply locally what we exceptionally (and probably) need.
So, I let you decide what is the best practice for this.