diff --git a/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx b/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx index ff69326e..07d2859e 100644 --- a/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx +++ b/components/src/components/molecules/CheckboxRow/CheckboxRow.tsx @@ -8,6 +8,7 @@ import { useId } from '../../../hooks/useId' export type Props = { label: string + subLabel?: string color?: Hue } & React.InputHTMLAttributes @@ -130,14 +131,18 @@ const Content = styled.div( ) export const CheckboxRow = React.forwardRef( - ({ label: title, name, color = 'blue', ...props }, ref) => { + ({ label, subLabel, name, color = 'blue', disabled, ...props }, ref) => { const defaultRef = React.useRef(null) const inputRef = ref || defaultRef const id = useId() + + const textColor = disabled ? 'grey' : 'text' + return ( ( - - {title} + + {label} + {subLabel && ( + + {subLabel} + + )} diff --git a/docs/src/reference/mdx/molecules/CheckboxRow.docs.mdx b/docs/src/reference/mdx/molecules/CheckboxRow.docs.mdx index 7e28211d..bdb342b2 100644 --- a/docs/src/reference/mdx/molecules/CheckboxRow.docs.mdx +++ b/docs/src/reference/mdx/molecules/CheckboxRow.docs.mdx @@ -8,7 +8,7 @@ import { CheckboxRow } from '@ensdomains/thorin' ``` ```tsx live=true expand=true - + ``` ## Props