@equinor/fusion-react-checkbox NPM

#@equinor/fusion-react-checkbox

Installation

npm install @equinor/fusion-react-checkbox

Example Usage

const MyComponent = () => {
  const [checked, setChecked] = useState(undefined);
  const onInput = useCallback((e) => {
      setChecked(!e.target.checked);
  }, [setChecked] );
  return (
    <div>
      <Checkbox value={checked} onInput={onInput} label="Example" />
      <p>Current State: <pre>{JSON.stringify({checked})}</pre></p>
    </div>
  );
}
<Checkbox value='value' checked/>

Properties/Attributes

Name	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked.
`indeterminate`	`boolean`	`false`	When a checkbox is the parent of a set of child checkboxes, the indeterminate state is used on the parent to indicate that some but not all of its children are checked.
`disabled`	`boolean`	`false`	When `true`, the checkbox cannot be interacted with, and renders in muted colors.
`value`	`string`	`''`	The value that will be included if the checkbox is submitted in a form.
`reducedTouchTarget`	`boolean`	`false`	When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.

Events

Event Name	Target	Detail	Description
`change`	`fwc-checkbox`	`{}`	Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like native `<input>`, the `change` event is not fired when the `checked` or `indeterminate` properties are set from JavaScript.