Checkbox

Checkboxes are inputs that offer to the user the possibility to select one or more options from a range of attributes.

Code

Usage

Specifications

Props

Name	Default	Description
defaultChecked: boolean		Initial state of the checkbox, only when it is uncontrolled.
checked: boolean	`false`	If true, the component is checked. If undefined the component will be uncontrolled and the value will be managed internally by the component.
value: string		Will be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the checkbox is checked.
label: string		Text to be placed next to the checkbox.
labelPosition: 'before' \| 'after'	`'before'`	Whether the label should appear after or before the checkbox.
name: string		Name attribute of the input element.
disabled: boolean	`false`	If true, the component will be disabled.
optional: boolean	`false`	If true, the component will display `(Optional)` next to the label.
onChange: function		This function will be called when the user clicks the checkbox. The new value will be passed as a parameter.
margin: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
size: string	`'fitContent'`	Size of the component ('small' \| 'medium' \| 'large' \| 'fillParent' \| 'fitContent').
tabIndex: number	`0`	Value of the tabindex.
ref: object		Reference to the component.

Examples

Controlled

() => {
  const [checked, changeChecked] = useState(false);
  const onChange = (newValue) => {
    changeChecked(newValue);
  };

  return (
    <DxcInset space="2rem">
      <DxcCheckbox label="Of legal age" checked={checked} onChange={onChange} />
    </DxcInset>
  );
}

() => {
  const [checked, changeChecked] = useState(false);
  const onChange = (newValue) => {
    changeChecked(newValue);
  };

  return (
    <DxcInset space="2rem">
      <DxcCheckbox label="Of legal age" checked={checked} onChange={onChange} />
    </DxcInset>
  );
}

Uncontrolled

() => {
  const checkboxRef = useRef();

  const handleSubmit = () => {
    const checkbox = checkboxRef.current.getElementsByTagName("input")[0];
    console.log(checkbox.checked ? checkbox.value : "");
  };

  return (
    <DxcInset space="2rem">    
      <DxcFlex direction="column" gap="2rem">
        <DxcCheckbox
          label="Of legal age"
          defaultChecked
          value="ofLegalAge"
          ref={checkboxRef}
        />
        <DxcButton
          label="Submit"
          type="submit"
          onClick={handleSubmit}
        />
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  const checkboxRef = useRef();

  const handleSubmit = () => {
    const checkbox = checkboxRef.current.getElementsByTagName("input")[0];
    console.log(checkbox.checked ? checkbox.value : "");
  };

  return (
    <DxcInset space="2rem">    
      <DxcFlex direction="column" gap="2rem">
        <DxcCheckbox
          label="Of legal age"
          defaultChecked
          value="ofLegalAge"
          ref={checkboxRef}
        />
        <DxcButton
          label="Submit"
          type="submit"
          onClick={handleSubmit}
        />
      </DxcFlex>
    </DxcInset>
  );
}

Props
Examples
- Controlled
- Uncontrolled

Edit this page on GitHub

Card

NextChip

Checkbox

Props

Examples

Controlled

Uncontrolled

Contents