Turn off labels

[benmonro]

I'm trying to control how my labels are rendered by using the form layout template & label properties of each field's options.

var options = {
  fields: {
    myInput: {
      label: "my label",
    }
  }
  template: (locals) => { return <div><label>{locals.inputs.myInput.props.options.label</label><span>{locals.inputs.myInput}</span></div>;}
};

However when I do this I see the label rendered twice. Once in in the <label> and once in the <span>.
I know about auto:none but I'm wondering if there's a way to completely disable tcomb-form's label rendering? The only way I know of is to remove the label property from the options, which I don't want to do. We have an established CSS so I'm trying to migrate an existing form to be exactly the same built with tcomb.

[gcanti]

I'm wondering if there's a way to completely disable tcomb-form's label rendering

Not sure I'm follow, auto: 'none' does exactly that

[benmonro]

from what i can tell, auto: 'none' disables the _auto generation_ of the labels from the field names. But if you provide a label to the options, it will still insert the label you provided to the options. In my case, the formLayout template references both the label and the input so it will render the label twice. Once in the label and once as part of the input. (As I do in the template above)

[gcanti]

This is because you are setting a template for a single input at the form level. {locals.inputs.myInput} contains the whole generated component, already equipped with its label

[benmonro]

@gcanti yes I am setting a template at the form level. The problem I have is that tcomb is putting the label inside the same container as the input field but I need it to be outside that container. On top of that, when I set the label to be the following:

    City: {
        label: <label>City</label>
    },

The resulting html is:

<label for=".numj489fr4.06" class="control-label" data-reactid=".numj489fr4.0.1.2.1.1.$City.0">
  <label data-reactid=".numj489fr4.0.1.2.1.1.$City.0.0">City</label>
</label>

[gcanti]

tcomb is putting the label inside the same container as the input field but I need it to be outside that container

Sure, that's just what the default template does. You can override it with your own if you prefer a different layout.

[benmonro]

ok so now I have to override the template for every single field on my form, just to be able to put the label where I want it? The rest of the default template is fine. Seems like that defeats the purpose of tcomb which is to save me having to do a bunch of HTML to generate a form...

[gcanti]

I have to override the template for every single field on my form

No, if you want a consistent layout across all your forms the trick is to define a "skin", that is a set of templates, one for each type of component, as I did for the bootstrap skin and the semantic ui skin. Say you want to use tcomb-form with the Foundation css framework:

1. define the basic templates, one for each type of component
2. tell tcomb-form to use that skin https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md#changing-the-default-skin

If you have a custom layout / css framework, the process is the same: this way you have the maximum control over the rendering phase

[benmonro]

ok fair enough. Is there a guide on what is required to create my own custom skin? Or is the best thing to just copy paste the bootstrap skin and modify it? That link you mentioned in step 2. only shows how to use it, but not what is required to define it myself...

[gcanti]

There's only this example in the GUIDE. I'd like to expand that section but I didn't found the time, maybe we could work together on this: I can help you write your custom skin and you can help me improve the docs.

Basically a skin is a module which exports the following functions:

module.exports = {
  textbox: ...,
  select: ...,
  checkbox: ...,
  radio: ...,
  date: ...,
  list: ...,
  struct: ...
};

where each function is a template (that is a function (locals) -> ReactElement). You can even reutilize some bootstrap templates (namely the struct and list templates) in order to speed up the things.

If your skin is very similar to the bootstrap one you could copy it and patch it with your changes (keep in mind that the bootstrap one is the most complex as I implemented the horizontal layout and some extras).

[benmonro]

ok sounds good. i'll take a stab at that.

[benmonro]

@gcanti so an issue I ran into is that my component defined in these functions needs to pass the onChange event up to locals.onChange. should probably include that in a readme...

other than that creating the custom skin was pretty straight forward actually. In fact rather than define the entire skin, I just added the ones I needed, select & textbox.

i.e.

t.form.Form.templates.textbox = myTemplate;
t.form.Form.templates.select = myOtherTemplate;

[gcanti]

other than that creating the custom skin was pretty straight forward actually

:+1:

[benmonro]

@gcanti one other thing that came up, not sure if I should open another issue for this or not, but in the template function there doesn't seem to be a way to get to the type for that item.

for example, If I want to check to see if the type associated w/ a textbox has meta.kind === 'maybe' there doesn't seem to be a way to do that... is that by design?

[gcanti]

in the template function there doesn't seem to be a way to get to the type for that item.

You are right, I'll add a way to get the type asap. Which version are you using? 0.6.x or 0.7.x?

[benmonro]

I'm currently using 0.6.3. I can upgrade though

[gcanti]

Ok, new issue for tracking this https://github.com/gcanti/tcomb-form/issues/210