<Label> has no way of providing the input value

[schnittchen]

Describe the bug

The Label component internally uses input_id/2, never input_id/3. The generated for attribute is never correct for a radio button or checkbox.

As a workaround, I am currently doing

<Label opts={for: nil}>
  <RadioButton value="value" />
  label text
</Label>

How to reproduce it

Clicking on the label text with this markup

<Label>
  <RadioButton value="value" />
  label text
</Label>

There are probably also legitimate use cases where wrapping the around the input is not feasible, so it would be good to allow <Label value={...}>text</Label> or similar.

does not select the nested radio button.

Your Environment

Surface: v0.7.0
LiveView: v0.17.6
Elixir: v1.13.0 (compiled with Erlang/OTP 24)

[miguel-s]

Hi @schnittchen!

RadioButton as a child of Label

I could reproduce the issue, thanks for catching and reporting it!
For now as you alredy mentioned you can make it work by passing the for option to the Label component. Either <Label opts={for: nil}> or <Label opts={for: input_id(form, field, value)}> will work.

RadioButton as a sibling of Label

This is working as intended, following the example set by Phoenix. Basically it requires explicitely passing the for option to Label.

Example:

<Form for={:form} :let={form: f}>
  <Field name={:radio}>
    <Label opts={for: input_id(f, :radio, "value")} />
    <RadioButton value="value" />
  </Field>
</Form>

See an older discussion here for more context.

[schnittchen]

Thanks! I suggest the Label documentation gets Radio/Checkbox examples (child + sibling) when this is fixed