server/assets/js/react/components/Label.tsx

37 lines
910 B
TypeScript
Raw Normal View History

2023-12-04 23:04:30 +00:00
import * as React from "react"
import clsx from "clsx"
import { FieldContext } from "./FieldSet"
type LabelProps = {
children: React.ReactNode
sublabel?: boolean
} & React.ComponentPropsWithoutRef<"label">
export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
function Label(props, ref) {
const fieldContext = React.useContext(FieldContext)
const { children, sublabel, className, ...other } = props
return (
<label
ref={ref}
{...other}
className={clsx(
"block font-semibold",
{
'text-neutral-850 before:content-["*"]':
fieldContext?.required && !sublabel,
"text-neutral-600/80": !fieldContext?.required,
"text-sm": sublabel,
"opacity-60": fieldContext?.disabled,
},
className
)}
>
{children}
</label>
)
}
)