@equinor/fusion-react-checkbox

#@equinor/fusion-react-checkbox

Storybook

Fusion Web Component

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.