diff --git a/.changeset/tall-wasps-end.md b/.changeset/tall-wasps-end.md new file mode 100644 index 00000000000..6b707fcc2a2 --- /dev/null +++ b/.changeset/tall-wasps-end.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Adds new `className` prop to `FormControl` component diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index e5504f83245..95129dc516f 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -38,10 +38,11 @@ export type FormControlProps = { * Vertical layout is used by default, and horizontal layout is used for checkbox and radio inputs. */ layout?: 'horizontal' | 'vertical' + className?: string } & SxProp const FormControl = React.forwardRef( - ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx}, ref) => { + ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className}, ref) => { const [slots, childrenWithoutSlots] = useSlots(children, { caption: FormControlCaption, label: FormControlLabel, @@ -124,7 +125,13 @@ const FormControl = React.forwardRef( }} > {isChoiceInput || layout === 'horizontal' ? ( - + input': {marginLeft: 0, marginRight: 0}}}> {React.isValidElement(InputComponent) && React.cloneElement( @@ -179,6 +186,7 @@ const FormControl = React.forwardRef( flexDirection="column" alignItems="flex-start" sx={{...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}} + className={className} > {slots.label} {React.isValidElement(InputComponent) &&