Make label component take required as a prop

[rotimi-best]

Improvement Description

Right now to make a label required you manually have to set the span, * and red class. this should be a simple prop in a component that we should reuse.

Rationale

No response

Proposed Solution

Instead of doing this

<div class="grid w-full max-w-sm items-center gap-1.5">
  <Label for="username">
    Username
    <span class="text-red-500">*</span>
  </Label>
  <Input id="username" placeholder="Username" required />
</div>

We should do this

<div class="grid w-full max-w-sm items-center gap-1.5">
  <Label for="username" required>
    Username
  </Label>
  <Input id="username" placeholder="Username" required />
</div>

The refactor all places in the code to use this new approach.

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this improvement suggestion.

• I have searched the existing issues and improvement suggestions to avoid duplication.
• I have provided a clear description of the improvement being suggested.
• I have explained the rationale behind this improvement.
• I have included any relevant technical details or design suggestions.
• I understand that this is a suggestion and that there is no guarantee of implementation.

[github-actions]

Thanks for the issue, our team will look into it as soon as possible. If you would like to work on this issue, please wait for us to decide if it's ready. To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.
For full info on how to contribute, please check out our contributors guide.