search

koumoul-dev / vuetify-jsonschema-form

Create beautiful and low-effort forms that output valid data. Published on npm as @koumoul/vjsf.
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/
MIT License
538 stars 154 forks source link

Title as Label instead of placeholder. #261

Open Vision70 opened 3 years ago

Vision70 commented 3 years ago

Hello,

It's not an issue, but a suggestion.

It would interested if we have an option to show the Title as a Label instead of in Placeholder. I'm building a dynamic form builder with vjsf and I some titles or descriptions have a long text.

Thank you

albanm commented 3 years ago

Hello,

The title is already used as a label for all common fields, cf https://github.com/koumoul-dev/vuetify-jsonschema-form/blob/master/lib/VJsfNoDeps.js#L175

Maybe your problem is with the vuetify behavior of showing the label inside the field while it is empty then to the top when it is filled. It looks like a placeholder for sure but it is not, it is clearly passed as a label to vuetify. If there is a way to get the rendering that you want while using vuetify fields (https://vuetifyjs.com/en/components/text-fields) please elaborate.

Vision70 commented 3 years ago

Hello,

Thank you for your feedback. I think I didn't make me clear. I would like to add a Description before the input field, not as Vuetify's Label/Placeholder properties.

Actually, the description attribute of JsonShema object is used as Vuetify's Label property. The vuetify behavior I can handle to not show the placeholder or label effect. But I cannot add a Text before the input field.

I'm building a dynamic form builder to build questionairies and the description is used as question statement and usually it has a long text. It would be very helpful if there was an option to do this.

Thank you!

albanm commented 3 years ago

It is the title attribute that is used as vuetify's label property. The description is used as a tooltip on a small button to the right of the field.

Something similar to what you describe can be done using a x-slots={before: '...'} annotation, it is a simple way of adding some content before the field. But the content does not come from title or description.

I suppose I could add an option to customize the way the description is displayed, either as a tooltip or a text before the field or a help message below the field.

Vision70 commented 3 years ago

Thank you and congrats for the component!