Label - Djamla

Label

A caption for interface elements.

Fitst Name

Installation

import { DetailedHTMLProps, forwardRef } from "react";

const Label = forwardRef<
  HTMLLabelElement,
  DetailedHTMLProps<React.LabelHTMLAttributes<HTMLElement>, HTMLLabelElement>
>(({ className, ...props }, ref) => (
  <label
    ref={ref}
    className={
      "text-base-900 mb-1 text-sm font-medium data-[invalid]:text-red-500 " +
      className
    }
    {...props}
  />
));

Label.displayName = "Label";

export { Label };

import { JSX, splitProps } from "solid-js";

interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {}

const Label = (props: LabelProps) => {
  const [local, labelProps] = splitProps(props, ["class"]);
  return (
    <label
      class={`text-base-900 mb-1 text-sm font-medium data-[invalid]:text-red-500 ${local.class || ""}`}
      {...labelProps}
    />
  );
};
export { Label };

Example

Fitst Name

import { Label } from "../core/label";

export const LabelExample = () => {
  return <Label>Fitst Name</Label>;
};