Skip to content
Snippets Groups Projects

fix: boolean input styling

Merged Sjoerd requested to merge fix/booleanInput into main
All threads resolved!
@@ -78,6 +78,11 @@ type BooleanProps = {
value: boolean;
tooltip?: string;
onChange?: (value: boolean) => void;
size?: 'xs' | 'sm' | 'md' | 'xl';
info?: string;
required?: boolean;
className?: string;
inline?: boolean;
};
type RadioProps = {
@@ -417,23 +422,31 @@ export const CheckboxInput = ({ label, value, options, onChange, tooltip }: Chec
);
};
export const BooleanInput = ({ label, value, onChange, tooltip }: BooleanProps) => {
export const BooleanInput = ({ label, value, onChange, tooltip, info, size, required, className }: BooleanProps) => {
return (
<Tooltip>
<TooltipTrigger>
<label className={`label cursor-pointer w-fit gap-2 px-0 py-1`}>
<span className="text-sm">{label}</span>
<input
type="checkbox"
checked={value}
onChange={(event) => {
if (onChange) {
onChange(event.target.checked);
}
}}
className="checkbox checkbox-xs"
/>
</label>
<TooltipTrigger className={className + 'w-full flex justify-between'}>
{label && (
<label className="label p-0">
<span
className={`text-${size} text-left truncate font-medium text-secondary-700 ${required && "after:content-['*'] after:ml-0.5 after:text-danger-500"}`}
>
{label}
</span>
{info && <Info tooltip={info} />}
</label>
)}
<input
type="checkbox"
checked={value}
onChange={(event) => {
if (onChange) {
onChange(event.target.checked);
}
}}
className="checkbox checkbox-xs"
aria-label={`Toggle ${label}`}
/>
</TooltipTrigger>
{tooltip && <TooltipContent>{tooltip}</TooltipContent>}
</Tooltip>
Loading