Description:
When using our checkbox and radio components, we currently need to manually wrap them with a separate Typography component for the label. This introduces unnecessary boilerplate. It also often requires extra styling to ensure proper alignment with form elements.
I'd like our custom components (checkbox, radio, etc.) to support a built-in label prop. This would allow developers to simply provide the label as a prop, and the component would internally handle rendering and styling consistently.
Current:
<div className="wrapper">
<TapsiCheckbox checked={value} onChange={onChange} />
<Typography as="label" size="sm">Label Text</Typography>
</div>
Proposed:
<TapsiCheckbox checked={value} onChange={onChange} label="Label Text" />