Label

Displays a label for a form field. 

<div class="flex items-center space-x-2">
    <Checkbox id="terms" />
    <Label htmlFor="terms">I accept the terms and conditions</Label>
  </div>

Installation

uvx --from basic-components components add label
pipx run --spec basic-components components add label
pip install basic-components && components add label
  • Copy Label components below to your local environment
  • Place them in the components/ui/label directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<div class="flex items-center space-x-2">
    <Checkbox id="terms" />
    <Label htmlFor="terms">I accept the terms and conditions</Label>
  </div>

Attributes

Prop Type Default Description
htmlFor String False The id of the field the label refers to.
className String "" Additional CSS classes for customization.

Code

{#def
    htmlFor: str = "",
    className: str = "",
#}
{% set baseclassName = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" %}
<label
    for="{{ htmlFor }}"
    class="{{ baseclassName }} {{ className }}"
    {{ attrs.render() }}
>
  {{ content }}
</label>