A few simple "tricks" to position form elements in a way they would not take so much screen space. Original example with shipping/billing: filamentexampl...
Just keep in mind that hiding the label is usually a bad idea for the accessibility of the form: - Screen readers usually have a hard time with placeholders, and they rely on the label to identity the field to the user - Also, suppose you are editing the form. You'd have no idea which field is which, as the placeholders would be hidden and you'd only see the data. I guess on the example it is pretty obvious, since the format of the data you'd fill in is a giveaway. But still, probably not a great idea.
Instead of using the placeholders, how about placing the labels in the same level or to the left of the input text? Because placing labels above the text inputs use a lot of space of the form. And placeholders are hard to read. I've seen people confuse the placeholders with text already saved in the forms. I agree that placeholders have UX caveats.
I'd also split the fields (e.g. City and zip code on the same line, same for first name and last name). I personally prefer to leave the labels, even if they're the same as the placeholders
I don't like to replace labels with placeholders because of accessibility issues. I prefer the flowbite approach with the label inside that move up a bit when the field is focused / filled. Their inputs fields are really well done.
1. How do you solve *required indicators (default asterisk colored red in the label)? 2. Can you move "Same as billing" into header of the form (right side next to "Shipping Details")?
That would require a separate Livewire component that would use both forms and tables from Filament. I don't have an example, maybe worth creating, will add to list of ideas. Alternatively, maybe check Simple Resources that use modal forms?
Can you give a specific example of a use-case? But also, a similar example we covered here: filamentexamples.com/project/filament-repeater-items-from-filtered-table-list
@@FilamentDaily Thanks for the reply. Actually i showed the hasMany Relation records in repeatable entry in infolist in view modal in resources but i don't know how to show that records in table format
You can shorten them as well, I just showed the principle that you can use for any form sections or full form. The goal was not to shorten all the full form on the screen.
Just keep in mind that hiding the label is usually a bad idea for the accessibility of the form:
- Screen readers usually have a hard time with placeholders, and they rely on the label to identity the field to the user
- Also, suppose you are editing the form. You'd have no idea which field is which, as the placeholders would be hidden and you'd only see the data. I guess on the example it is pretty obvious, since the format of the data you'd fill in is a giveaway. But still, probably not a great idea.
facts 💯
Instead of using the placeholders, how about placing the labels in the same level or to the left of the input text? Because placing labels above the text inputs use a lot of space of the form. And placeholders are hard to read. I've seen people confuse the placeholders with text already saved in the forms. I agree that placeholders have UX caveats.
I'd also split the fields (e.g. City and zip code on the same line, same for first name and last name). I personally prefer to leave the labels, even if they're the same as the placeholders
Thank you very much!
I don't like to replace labels with placeholders because of accessibility issues. I prefer the flowbite approach with the label inside that move up a bit when the field is focused / filled. Their inputs fields are really well done.
1. How do you solve *required indicators (default asterisk colored red in the label)?
2. Can you move "Same as billing" into header of the form (right side next to "Shipping Details")?
Interesting questions, need to think, experiment and shoot future videos :)
We have also ->compact() to lessen padding and spacing
Great Tutorials. How do I show the create form on the left and the table on the right in the filament? if there is any example do share
That would require a separate Livewire component that would use both forms and tables from Filament.
I don't have an example, maybe worth creating, will add to list of ideas.
Alternatively, maybe check Simple Resources that use modal forms?
How does one reduce the space between the panel items and the form/table? I find that it wastes so much space, especially on larger screens.
How to reduce padding into forms?
Can you please do the video to do how to show the records in table format inside modal?
Can you give a specific example of a use-case?
But also, a similar example we covered here: filamentexamples.com/project/filament-repeater-items-from-filtered-table-list
@@FilamentDaily Thanks for the reply. Actually i showed the hasMany Relation records in repeatable entry in infolist in view modal in resources but i don't know how to show that records in table format
@@parthibarath6092 I haven't implemented exact case of infolist and repeatable entry, sorry don't have the answer for you
thumbsup reaction at 2:45
So we leave the long ass fields like that in "Your details"?
You can shorten them as well, I just showed the principle that you can use for any form sections or full form. The goal was not to shorten all the full form on the screen.