Check Box Component

Check Box component that can be used to render a custom check box and receive input from the user.

Props

Property	Type	Description
className	string	The CSS class name of the element.
id	any	The unique identifier of the element.
label	string	The text to display as the label for the element.
name	string	The name of the element.
disabled	boolean	Whether the element is disabled or not.
onChange	(event: ChangeEvent`<HTMLInputElement>`) => void	The function to call when the value of the element changes.
mode	string	The mode in which the element is displayed.
checked	boolean	Whether the element is checked or not (for checkboxes and radio buttons).
indeterminate	boolean	Whether the element is in an indeterminate state or not (for checkboxes).

Usage

Here's an example of how to use the Check Box component:

Functional Component

App.tsx

import React, { useState } from 'react';
import { CheckBox } from 'gbs-fwk-buildingblock';
 
function App() {
  const [checked, setChecked] = useState(false);
 
  const handleCheck = (event: any) => {
    setChecked(event.checked);
  };
 
  return (
    <div>
      <CheckBox label="Check me" checked={checked} OnChange={handleCheck} />
      <p>Checked: {checked ? 'Yes' : 'No'}</p>
    </div>
  );
}
 
export default CheckBox;

Class Component

App.tsx

import React from 'react';
import { CheckBox } from 'gbs-fwk-buildingblock';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { checked: false };
    this.handleCheck = this.handleCheck.bind(this);
  }
 
  handleCheck(event) {
    this.setState({ checked: event.checked });
  }
 
  render() {
    return (
      <div>
        <CheckBox
          label="Check me"
          checked={this.state.checked}
          OnChange={this.handleCheck}
        />
        <p>Checked: {this.state.checked ? 'Yes' : 'No'}</p>
      </div>
    );
  }
}
 
export default CheckBox;

Gbs Fwk Building Block Custom Button