Separate labels from controls

[rmorse]

Is it planned to be able to provide a label externally for input controls?

For example, if I wanted to use a text input control (or a colour picker), and have it display in a table, and I wanted to have the labels in the left column cells, and the control itself in the right column, then I wouldn't be able to do this "as is" (I'm sure there there are plenty of css or non-table ways of achieving the same layout),

I've found myself recreating a bunch of controls (and re-wrapping them in BaseControl's) to do that on a project I'm playing around with.

To be honest, I don't know what the solution could even look like (slots, refs? - the problem would be getting the ID I guess, maybe we could supply our own ID to a control, ommit the label and then we can implement the label + ID ourselves) - it seems like it might be complicated for such a small gain - or if it is something that there would be much demand for.

Maybe the solution is to rebuild the controls as I have been doing or look for CSS way around the issue - I'm not attached to the tables, but I thought I would share my experience as I think it makes for a good use case / food for thought.

[ItsJonQ]

Haiii!!

Is it planned to be able to provide a label externally for input controls? Yes! I experienced a lot of this pain myself.

The new Component System will provide individual pieces for form based controls.

For example:

• FormGroup (improved version of BaseControl)
• ControlLabel (the label element)
• TextInput (JUST the input part)
• Slider (JUST the slider part)
• etc...

FormGroup has some neat features in that it automatically creates/binds id together. So you can do something like this:

<FormGroup label="First name">
  <TextInput />
</FormGroup>

(The id has already been created and bound for you)

If you need to use the label element in a custom way, you can do this:

<FormGroup>
  ...
  <ControlLabel>First Name</ControlLabel>
  ...
  <TextInput />
</FormGroup>

(Same thing applies here! id is automatically bound for you)

---

I wanted to have the labels in the left column cells, and the control itself in the right column

For this particular example, you can actually do this!

<FormGroup label="First name" horizontal>
  <TextInput />
</FormGroup>

If that doesn't work too well, you can use other layout solutions. Maybe something like this:

<FormGroup>
  <Grid columns={2}>
    <ControlLabel>First Name</ControlLabel>
    <TextInput />
  </Grid>
</FormGroup>

---

From working with BaseControl and the other control-like components from Gutenberg, I realized how important it was to provide the individual pieces for custom composition. Not only that, but to try to automate some of the finicky parts (like id association).

[ItsJonQ]

I just created a CodeSandbox example:

https://codesandbox.io/s/g2-form-group-example-mgcgz

Feel free to poke at it :). Lemme know if this workflow feels about right for you. Always open to new ideas of how we can make this stuff feel more intuitive

[rmorse]

@ItsJonQ this looks awesome! I had a play and it looks like this use case is well and truly covered..!

Something that threw me off though was the naming of <FormGroup> - maybe I don't fully understand the scope of what this does just yet, and maybe I'm just used to <form> tags, but I felt like I should put a bunch of stuff in there like:

<FormGroup>
    <HStack>
        <ControlLabel>First name</ControlLabel>
        <TextInput />
    </HStack>
    <HStack>
        <ControlLabel>Last name</ControlLabel>
        <TextInput />
    </HStack>
</FormGroup>

But I'm quickly realising it should just contain 1 label + element pair, and then that automagically links them all together - I'm no good with naming though, but I'll throw one out there - ControlGroup - as a control used to consist of the label + input pair - but even that makes me think slightly of a group of controls...

This is looking really good, I'm excited to get using this in my projects :)

[ItsJonQ]

I'm glad I could help! ❤️

Yes, naming is hard 😂 . I went in a couple of circles for FormGroup. Ultimately, I decided to use it because that's what Bootstrap uses. Due to it's popularity (and influence), I hoped that it would feel more intuitive for people.

ControlGroup is already being used 🙈 .

That's a fun one! It automagically combines control types together. You can think of it like a <ButtonGroup /> (where buttons collapse into each other and round their corners), but it works for basically any control

https://g2-components.xyz/iframe.html?id=components-controlgroup--default&viewMode=story

---

This is looking really good, I'm excited to get using this in my projects :)

That's wonderful to hear 🎉 !! A lot of the work put into these systems is to provide devs with that "automagic" experience ✌️

[rmorse]

Thanks for the thorough explanations, it's appreciated!