diff --git a/src/frontend/src/primitives/Field.tsx b/src/frontend/src/primitives/Field.tsx index a1a320a8..1e900caa 100644 --- a/src/frontend/src/primitives/Field.tsx +++ b/src/frontend/src/primitives/Field.tsx @@ -18,7 +18,9 @@ import { Input } from './Input' import { Radio } from './Radio' import { Checkbox } from './Checkbox' import { Select } from './Select' +import { Text } from './Text' import { Div } from './Div' +import { css } from '@/styled-system/css' const FieldWrapper = styled('div', { base: { @@ -54,7 +56,9 @@ const StyledLabel = styled(Label, { }) type OmittedRACProps = 'type' | 'label' | 'items' | 'description' | 'validate' -type Items = { items: Array<{ value: string; label: T }> } +type Items = { + items: Array<{ value: string; description?: string; label: T }> +} type PartialTextFieldProps = Omit type PartialCheckboxProps = Omit type PartialCheckboxGroupProps = Omit @@ -200,7 +204,29 @@ export const Field = ({ {LabelAndDescription} {items.map((item, index) => ( - {item.label} + +
+ {item.label} + {item.description && ( + + {item.description} + + )} +
+
))} {RACFieldErrors} diff --git a/src/frontend/src/primitives/Radio.tsx b/src/frontend/src/primitives/Radio.tsx index 2e84fdd6..46822aec 100644 --- a/src/frontend/src/primitives/Radio.tsx +++ b/src/frontend/src/primitives/Radio.tsx @@ -63,6 +63,14 @@ export const StyledRadio = styled(RACRadio, { }, }, }, + alignment: { + top: { + alignItems: 'start', + '& .mt-Radio': { + marginTop: '3px', + }, + }, + }, }, })