5da71f3735
- Input: with label, error, hint, a11y attributes - Textarea: resizable with label, error, hint - Card: with CardHeader, CardTitle, CardDescription sub-components - Label: with required indicator - Select: native select with chevron icon, label, error - Separator: horizontal/vertical with ARIA roles - All components use --bl-* design token CSS variables - 12 total components in @bytelyst/ui
26 lines
583 B
TypeScript
26 lines
583 B
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
required?: boolean;
|
|
}
|
|
|
|
export function Label({ required, className, children, ...props }: LabelProps) {
|
|
return (
|
|
<label
|
|
className={clsx(
|
|
'block text-sm font-medium text-[var(--bl-text-secondary,#a0a0b0)]',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
{required && (
|
|
<span className="ml-0.5 text-red-400" aria-hidden="true">
|
|
*
|
|
</span>
|
|
)}
|
|
</label>
|
|
);
|
|
}
|