React-jsonschema-form: Optional/required label formatting

Created on 12 Jul 2016 · 8Comments · Source: rjsf-team/react-jsonschema-form

Prerequisites

[x] I have read the documentation.

Description

Per https://uxdesign.cc/design-better-forms-96fadca0f49c#.mmbenef8x it'd look a heck of a lot nicer if optional params had -Optional labels rather than required ones having a star.

Alternatively we might be able to move that into CSS so the asterisk or optional text could be controlled there.

I get that some people likely prefer the current behavior so I'd love to see ideas on where to control this otherwise.

Happy to investigate here if a pull request of some kind would be welcomed

Source

kav

Most helpful comment

Sure, that's something I wanted to do for a while. A first step could be to just update the existing code to use what this post suggests; the thing is that we don't want to introduce specific stylesheets/styles to avoid introducing too much coupling with the bootstrap semantics.

I've been thinking for a while that we could provide a _field template_ option, basically a stateless component providing the component pieces needed to render a whole field from its props:

// dumb example, more props would be exposed
function MyFieldTemplate({id, label, required, errors, children}) {
  return (
    <div className="my-field">
      <label htmlFor={id}>{label}{required ? "*" : ""}</label>
      {children}
      {errors}
    </div>
  );
}

render(<Form fieldTemplate={MyFieldTemplate} />);

What do you think?

n1k0 on 12 Jul 2016

👍3

All 8 comments

I've been thinking for a while that we could provide a _field template_ option, basically a stateless component providing the component pieces needed to render a whole field from its props:

// dumb example, more props would be exposed
function MyFieldTemplate({id, label, required, errors, children}) {
  return (
    <div className="my-field">
      <label htmlFor={id}>{label}{required ? "*" : ""}</label>
      {children}
      {errors}
    </div>
  );
}

render(<Form fieldTemplate={MyFieldTemplate} />);

What do you think?

n1k0 on 12 Jul 2016

👍3

A first step could be to just update the existing code to use what this post suggests

Done that in #276, feedback welcome.

n1k0 on 12 Jul 2016

This field template thing would be great !
(a few months ago, I had to create a complete SchemaField just to get the markup I needed for my fields).

cedricmessiant on 12 Jul 2016

I like the update although it feels a bit like trading one issue for another. Fundamentally this is a form styling question rather than a content one so anything that injects content seems less ideal. Controlling for some formatting of the optional text would be ideal. Injecting fields is handy but seems like overkill for this use case (I can see a few others for sure)

I think a better solution is to simply add a class "form-label-required" or something like that to the label associated with the required control. Then it is crazy easy to control the behavior via css. See this fiddle for an example I threw together. Obviously in react you might put the css in the component style but you get the idea.

https://jsfiddle.net/514r2f18/4/

kav on 14 Jul 2016

A template system would be a game changer indeed!