Checkbox

CheckBox Component is use to render a checkbox input in the user interface.

Usage#

CheckBox component has a checkbox input field and a optional label which if mentioned is rendered in user interface

Checkbox

Code#

const MyComponent = () => {
  const [checked, setChecked] = React.useState(false);
  return (
    <Checkbox
      label="Checkbox"
      checked={checked}
      onChange={(value) => {
        setChecked(value);
        console.log(`The value is ${value}`);
      }}
    />
  );
};

Default checked#

The starting value for a check box can also be mentioned in Palette Checkbox by providing a boolean value to the checked prop.

note

checked prop acts as only a starting value. The checked state is emitted by onChange prop

Checkbox

Code#

const MyComponent = () => {
  const [checked, setChecked] = React.useState(true);
  return (
    <Checkbox
      label="Checkbox"
      checked={checked}
      onChange={(value) => {
        setChecked(value);
      }}
    />
  );
};

Disabled Checkbox#

Checkbox

Code#

<CheckBox label="Checkbox" disabled />

API#

Prop	Type	Possible values	Default Value
label	`string`	Any String value	`""`
checked	`boolean`	`true` and `false`	`false`
disabled	`boolean`	`true` and `false`	`false`
onChange	`function`	--	--

Built by Akshay 🤙