With Description Checkbox for React

When the label alone doesn't say what checking it means: what an email list will send, what data is shared, what a permission allows. If people would ask "what does this do?", add a description. Skip it for self-explanatory options like "Enable dark mode".

One or two short sentences. The description explains the consequence; it isn't a policy. Link to full terms when there is more to say, and keep each line quick to scan.

FieldDescription uses text-muted-foreground at a smaller size, so the label reads first and the description second. The two levels let people decide from the label and read on only when they need the detail.

It wraps like any paragraph, and the field caps the block at max-w-sm here. Because the field holds a FieldContent, it aligns its items to the start, so the checkbox stays level with the label instead of drifting to the middle of a tall block.

Yes. It is ordinary text, so a link to the terms or privacy policy, or a strong for emphasis, works. Keep it static: people expect a description to explain the option, not to hold more controls.

The label is the checkbox's name; the description is ordinary text next to it, read when a screen reader moves through the page. To have it announced with the checkbox on focus, give the description an id and point the checkbox's aria-describedby at it.