FormControls size setting

src/common/components/forms/FormRadioControl.tsx

@@ -18,14 +18,16 @@ export const FormRadioControl = <TValue extends string>(props: {
   title: string | React.JSX.Element,
   description?: string | React.JSX.Element,
   tooltip?: string | React.JSX.Element,
+  size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
   options: Immutable<FormRadioOption<TValue>[]>;
   value?: TValue;
   onChange: (value: TValue) => void;
 }) =>
-  <FormControl orientation='horizontal' disabled={props.disabled} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+  <FormControl size={props.size} orientation='horizontal' disabled={props.disabled} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
     {(!!props.title || !!props.description) && <FormLabelStart title={props.title} description={props.description} tooltip={props.tooltip} />}
     <RadioGroup
+      size={props.size}
       orientation='horizontal'
       value={props.value}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) => event.target.value && props.onChange(event.target.value as TValue)}

src/common/components/forms/FormSelectControl.tsx

@@ -29,6 +29,7 @@ export type FormSelectOption<T extends string> = {
 export const FormSelectControl = <TValue extends string>(props: {
   title?: React.ReactNode;
   tooltip?: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
   options: Readonly<FormSelectOption<TValue>[]>;
   value?: TValue;
@@ -39,7 +40,7 @@ export const FormSelectControl = <TValue extends string>(props: {
   const selectedOption = props.options.find(option => option.value === props.value);
 
   return (
-    <FormControl orientation='horizontal' disabled={props.disabled} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+    <FormControl size={props.size} orientation='horizontal' disabled={props.disabled} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
       {!!props.title && (
         <FormLabelStart
           title={props.title}
@@ -48,6 +49,7 @@ export const FormSelectControl = <TValue extends string>(props: {
         />
       )}
       <Select
+        size={props.size}
         value={props.value}
         onChange={(_, value) => value && props.onChange(value as TValue)}
         placeholder={props.placeholder}

src/common/components/forms/FormSliderControl.tsx

@@ -10,8 +10,9 @@ import { FormLabelStart } from './FormLabelStart';
  */
 export function FormSliderControl(props: {
   title: string | React.JSX.Element, description?: string | React.JSX.Element, ariaLabel?: string,
-  disabled?: boolean,
+  size?: 'sm' | 'md' | 'lg',
   variant?: VariantProp,
+  disabled?: boolean,
   min?: number, max?: number, step?: number, defaultValue?: number,
   valueLabelDisplay?: 'on' | 'auto' | 'off',
   value: number | number[] | null, onChange: (value: number) => void,
@@ -19,13 +20,14 @@ export function FormSliderControl(props: {
   endAdornment?: React.ReactNode,
 }) {
   return (
-    <FormControl disabled={props.disabled} orientation='horizontal' sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+    <FormControl size={props.size} disabled={props.disabled} orientation='horizontal' sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
       <FormLabelStart title={props.title} description={props.description} />
       {props.startAdornment}
       <Slider
         aria-label={props.ariaLabel}
         color='neutral'
         variant={props.variant}
+        size={props.size}
         disabled={props.disabled}
         min={props.min} max={props.max} step={props.step} defaultValue={props.defaultValue}
         value={props.value === null ? undefined : props.value} onChange={(_event, value) => props.onChange(value as number)}

src/common/components/forms/FormSwitchControl.tsx

@@ -12,15 +12,17 @@ export function FormSwitchControl(props: {
   title: string | React.JSX.Element, description?: string | React.JSX.Element,
   on?: React.ReactNode, off?: string, fullWidth?: boolean,
   checked: boolean, onChange: (on: boolean) => void,
+  size?: 'sm' | 'md' | 'lg',
   disabled?: boolean,
   tooltip?: React.ReactNode,
 }) {
   return (
-    <FormControl orientation='horizontal' disabled={props.disabled} sx={{ flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center' }}>
+    <FormControl size={props.size} orientation='horizontal' disabled={props.disabled} sx={{ flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center' }}>
       <FormLabelStart title={props.title} description={props.description} tooltip={props.tooltip} />
       <Switch
         checked={props.checked}
         onChange={event => props.onChange(event.target.checked)}
+        size={props.size}
         endDecorator={props.checked ? props.on || 'On' : props.off || 'Off'}
         sx={props.fullWidth ? { flexGrow: 1 } : undefined}
         slotProps={{ endDecorator: { sx: { minWidth: 26 } } }}