Support Start-/EndAdornments for Input fields #2018

Activity

1. sdirix

   added

   feature

   react

   material

   on Sep 21, 2022
2. sdirix

   added this to the Backlog milestone on Sep 21, 2022
3. hoffmann-m commented on Nov 21, 2023

   

   hoffmann-m

   on Nov 21, 2023

   More actions

   Adornments would be very helpful for our configuration app. Additionally, it would be good if you could use keys in the schema for this. It would be even better if you could also use the "description" for this.
4. jgteske commented on Oct 19, 2026

   

   jgteske

   on Oct 19, 2026

   Last edited by jgteske

   Contributor

   More actions

   Hi @sdirix!

   We're also using JSON Forms with the React Material renderers in our project and would really need this feature for something we're currently working on.

   The implementation idea in the description sounds good to me, and I'd be happy to contribute a PR for it, including tests.
   Is anyone already working on this? And are you fine with the proposed approach, or is there anything you'd like done differently?

   It would help us a lot if this could make it into one of the next releases. I'll try to keep the PR small so it's easy to review.

   Thanks a lot!
5. sdirix commented on Oct 20, 2026

   

   sdirix

   on Oct 20, 2026

   Member

   More actions

   @jgteske Can you explain how the implementation via "description" would look like?
6. jgteske commented on Oct 20, 2026

   

   jgteske

   on Oct 20, 2026

   Contributor

   More actions

   @sdirix Of course.
   Here is the short implementation idea for this feature. I'm open for different approaches and suggestions.

   Idea

   Input controls in the React Material renderer set can show static text before or after the input, e.g. a currency symbol or a unit. The feature uses MUI's built-in InputAdornment and is configured through two new UI schema options:

   {
     "type": "Control",
     "scope": "#/properties/weight",
     "options": { "startAdornment": "€", "endAdornment": "kg" }
   }

   The feature is opt-in. Controls without these options render exactly as before.

   Implementation

   • A shared hook reads the two options in the same way as all other options (UI schema options merged with the global config). It turns non-empty strings into MUI adornments, which each input renderer passes on to its MUI input. A renderer can optionally style the start or end adornment.
   • Built-in buttons stay in place. Some inputs already use the end slot: the clear button of text fields, and the dropdown arrow of selects and autocompletes. The configured suffix is placed in front of these buttons, so the order is always value → suffix → button.
   • Label handling. The renderers draw the label separately from the input, so MUI can't detect a start adornment on its own. When a start adornment is set, the label is shrunk explicitly and the outlined border leaves room for it, so the label never covers the prefix.

   Scope

   • Supported: text, number, integer and enum controls (as autocomplete and as select).
   • Not supported:
     • date, time and date-time pickers, which use their end slot for the picker button
     • table columns, since cells don't receive per-column options
     • icons or interactive content
     • the other renderer sets
7. sdirix commented on Oct 20, 2026

   

   sdirix

   on Oct 20, 2026

   Member

   More actions

   This sounds good to me. If you like you can open a PR for this.
8. jgteske commented on Oct 21, 2026

   

   jgteske

   on Oct 21, 2026

   Last edited by jgteske

   Contributor

   More actions

   @sdirix I created the PR #2655 and linked it here

   I will also provide an PR for the changes for the documentation jsonforms2-website
9. jgteske commented on Oct 21, 2026

   

   jgteske

   on Oct 21, 2026

   Contributor

   More actions

   The PR for the documentation can be found here: eclipsesource/jsonforms2-website#323
10. jgteske commented on Oct 26, 2026

    

    jgteske

    on Oct 26, 2026

    Last edited by jgteske

    Contributor

    More actions

    Hi @sdirix, , just a friendly ping on this one. Would you have time to take a look? If anything should be done differently, I'm happy to make changes.

    Thanks!