diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss index b151f451a..1e5285cb7 100644 --- a/src/components/Checkbox/Checkbox.module.scss +++ b/src/components/Checkbox/Checkbox.module.scss @@ -3,6 +3,7 @@ .checkbox { display: flex; + flex-wrap: wrap; align-items: center; > label { @@ -22,6 +23,14 @@ } } + .header { + flex: 1 1 100%; + margin-bottom: 4px; + font-family: theme.$body-font-family; + font-weight: 700; + text-align: left; + } + input { display: flex; flex-shrink: 0; diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 768299593..4d2176fbe 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,21 +1,23 @@ -import React, { ReactNode } from 'react'; +import React from 'react'; import useOpaqueId from '../../hooks/useOpaqueId'; import styles from './Checkbox.module.scss'; type Props = { - label?: string | ReactNode; + label?: string; name: string; value: boolean; onChange: React.ChangeEventHandler; + header?: string; }; -const Checkbox: React.FC = ({ label, name, onChange }: Props) => { +const Checkbox: React.FC = ({ label, name, onChange, header }: Props) => { const id = useOpaqueId('check-box', name); return (
+ {header && {header}}