diff --git a/apps/ui/src/ui/form/OptionField.css b/apps/ui/src/ui/form/OptionField.css index 6ca8e9f2..744a3e91 100644 --- a/apps/ui/src/ui/form/OptionField.css +++ b/apps/ui/src/ui/form/OptionField.css @@ -13,7 +13,6 @@ } .options-group .option { - /* border: 1px solid var(--color-grey); */ flex-grow: 1; border-radius: var(--border-radius-inner); padding: 8px 10px; @@ -28,7 +27,7 @@ display: block; } -.options-group .option:hover { +.options-group .option:hover:not(.disabled) { background: var(--color-grey-soft); border-color: var(--color-grey-hard); } @@ -37,4 +36,8 @@ background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); +} + +.options-group .option.disabled { + cursor: not-allowed; } \ No newline at end of file diff --git a/apps/ui/src/ui/form/OptionField.tsx b/apps/ui/src/ui/form/OptionField.tsx index 2a2ac062..5524eec9 100644 --- a/apps/ui/src/ui/form/OptionField.tsx +++ b/apps/ui/src/ui/form/OptionField.tsx @@ -4,6 +4,7 @@ import { RadioGroup } from '@headlessui/react' import { FieldProps, FieldOption } from './Field' import './OptionField.css' import { snakeToTitle } from '../../utils' +import clsx from 'clsx' interface OptionFieldProps> extends FieldProps { options: FieldOption[] @@ -51,10 +52,9 @@ export default function OptionField - `option ${active ? 'active' : ''} - ${checked ? 'selected' : ''}` - }>{label} + className={({ active, checked, disabled }) => clsx( + 'option', { selected: checked, active, disabled }, + )}>{label} ))}