Skip to content

[UFormField] add orientation #5516

@edimitchel

Description

@edimitchel

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesttriageAwaiting initial review and prioritizationv4#4488

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions