diff --git a/src/components/CheckboxGroup/checkboxList.js b/src/components/CheckboxGroup/checkboxList.js index ae219b03e..a39ebedcf 100644 --- a/src/components/CheckboxGroup/checkboxList.js +++ b/src/components/CheckboxGroup/checkboxList.js @@ -7,7 +7,7 @@ import StyledItemDescription from '../RadioGroup/styled/itemDescription'; import RenderIf from '../RenderIf'; export default function CheckboxList(props) { - const { values, options, onChange, describedBy, name, error } = props; + const { values, options, onChange, describedBy, name, error, size } = props; return options.map((option, index) => { const key = `checkbox-${index}`; const { description, ...rest } = option; @@ -22,6 +22,7 @@ export default function CheckboxList(props) { ariaDescribedBy={describedBy} name={name} error={error} + size={size} /> {description} @@ -37,6 +38,7 @@ CheckboxList.propTypes = { values: PropTypes.array, onChange: PropTypes.func, describedBy: PropTypes.string, + size: PropTypes.oneOf(['small', 'medium', 'large']), }; CheckboxList.defaultProps = { @@ -44,4 +46,5 @@ CheckboxList.defaultProps = { onChange: () => {}, describedBy: undefined, name: undefined, + size: 'medium', }; diff --git a/src/components/CheckboxGroup/index.d.ts b/src/components/CheckboxGroup/index.d.ts index f2b14f57c..7943c971f 100644 --- a/src/components/CheckboxGroup/index.d.ts +++ b/src/components/CheckboxGroup/index.d.ts @@ -20,6 +20,7 @@ export interface CheckboxGroupProps extends BaseProps { onChange?: (values: string[]) => void; id?: string; orientation?: 'vertical' | 'horizontal'; + size?: 'small' | 'medium' | 'large'; } declare const CheckboxGroup: ComponentType; diff --git a/src/components/CheckboxGroup/index.js b/src/components/CheckboxGroup/index.js index a52ba7258..21606902e 100644 --- a/src/components/CheckboxGroup/index.js +++ b/src/components/CheckboxGroup/index.js @@ -61,6 +61,7 @@ class CheckboxGroup extends Component { style, className, orientation, + size, } = this.props; return ( @@ -81,6 +82,7 @@ class CheckboxGroup extends Component { name={this.groupNameId} describedBy={this.getErrorMessageId()} error={error} + size={size} /> @@ -127,6 +129,8 @@ CheckboxGroup.propTypes = { id: PropTypes.string, /** The orientation of the element. */ orientation: PropTypes.oneOf(['vertical', 'horizontal']), + /** The size of the input. Valid values are small, and large. */ + size: PropTypes.oneOf(['small', 'medium', 'large']), }; CheckboxGroup.defaultProps = { @@ -143,6 +147,7 @@ CheckboxGroup.defaultProps = { style: undefined, id: undefined, orientation: 'vertical', + size: 'medium', }; export default withReduxForm(CheckboxGroup);