diff --git a/src/input/Input.jsx b/src/input/Input.jsx index 65d6ce3..820956b 100644 --- a/src/input/Input.jsx +++ b/src/input/Input.jsx @@ -39,7 +39,18 @@ export function Field({ children, className, ...rest }) { export const InputField = forwardRef( ( - { id, label, className, type, checked, prefix, suffix, disabled, ...rest }, + { + id, + label, + className, + type, + checked, + prefix, + suffix, + description, + disabled, + ...rest + }, ref ) => { return ( @@ -82,6 +93,7 @@ export const InputField = forwardRef( {label} {suffix && {suffix}} + {description &&
{description}
} ); } diff --git a/src/input/Input.module.css b/src/input/Input.module.css index 865a895..c04a85a 100644 --- a/src/input/Input.module.css +++ b/src/input/Input.module.css @@ -118,13 +118,15 @@ .checkboxField { display: flex; align-items: flex-start; + flex-wrap: wrap; } .checkboxField label { display: flex; align-items: center; flex-grow: 1; - font-size: 13px; + font-size: 15px; + line-height: 24px; } .checkboxField input { @@ -176,3 +178,9 @@ color: var(--alert); font-weight: 600; } + +.description { + color: var(--secondary-content); + margin-left: 26px; + width: 100%; /* Ensure that it breaks onto the next row */ +} diff --git a/src/settings/SettingsModal.jsx b/src/settings/SettingsModal.jsx index ad2aeef..919b955 100644 --- a/src/settings/SettingsModal.jsx +++ b/src/settings/SettingsModal.jsx @@ -87,9 +87,10 @@ export const SettingsModal = (props) => {