Label

Label est un composant qui affiche un libellé textuel. Il est couramment utilisé pour étiqueter les champs de formulaire, les éléments de liste et d’autres éléments d’interface.

Utilisation

Importez Label depuis @firecms/ui et passez le contenu comme enfant.

Label de base

Un exemple de base du composant Label.

import React from "react";
import { Checkbox, Label } from "@firecms/ui";

export default function LabelCheckboxDemo() {

    const [checked, setChecked] = React.useState(false);

    return (
        <Label
            border={true}
            className="cursor-pointer p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
            htmlFor="my-filter"
        >
            <Checkbox id="my-filter"
                      checked={checked}
                      size={"small"}
                      onCheckedChange={setChecked}/>
            Filter for null values
        </Label>
    );
}