With Subtitle Checkbox for React

For a one- or two-word hint that helps the decision: Recommended, Optional, Required, Beta, Pro. Anything longer is an explanation and belongs in a FieldDescription under the label.

Change the span's classes: text-primary to make it stand out, or text-destructive for a warning. For a pill, swap the span for a Badge with variant="secondary". Stick to the theme's colors so it works in dark mode.

gap-2 (8px) separates the two without making the subtitle look unrelated. items-baseline lines the smaller muted text up with the label's text rather than its box, so the pair reads as one line.

Yes. In a list, render the span only when the item has a subtitle. Rows without one simply end at the label, and the checkboxes still line up because they come first in each row.

The subtitle sits outside the label, so the checkbox's name is just "Enable notifications"; the subtitle is read as nearby text. If the qualifier matters to the choice, move it inside the FieldLabel so it becomes part of the name, and spell it out: "Recommended", not "Rec".

Keep subtitles to a word or two. If yours runs longer, it is a description: move it under the label. As a fallback, flex-wrap on the row lets the subtitle drop to the next line on narrow screens.