Have ideas to improve npm?Join in the discussion! »

    @hawk-ui/checkbox

    2.13.1 • Public • Published

    Installation

    To install a component run

    $ npm install @hawk-ui/checkbox --save

    Please import CSS styles via

    @import '/path__to__node_modules/@hawk-ui/checkbox/dist/index.min.css

    Usage

    Without Required

    Demo

    import Checkbox from '@hawk-ui/checkbox';
    initialState = {
      fruits: [
        { key: 1, label: 'apple', value: 'apple' },
        { key: 1, label: 'mango', value: 'mango' },
        { key: 1, label: 'banana', value: 'banana' },
        { key: 1, label: 'orange', value: 'orange' },
        { key: 1, label: 'pineapple', value: 'pineapple' },
      ],
      selectedItem: [],
    };
    
    <Checkbox
      options={state.fruits}
      selectedItem={state.selectedItem}
      onChange={(event) => {
        if (state.selectedItem.indexOf(event.target.value) !== -1) {
          let fruits = state.selectedItem.filter(function(item) {
            return item !== event.target.value;
          });
          setState({
            selectedItem: fruits,
          });
        } else {
          setState({
            selectedItem: [...state.selectedItem, event.target.value],
          });
        }
      }}
    />

    With Required

    Demo

    import Checkbox from '@hawk-ui/checkbox';
    initialState = {
      fruits: [
        { key: 1, label: 'apple', value: 'apple' },
        { key: 1, label: 'mango', value: 'mango' },
        { key: 1, label: 'banana', value: 'banana' },
        { key: 1, label: 'orange', value: 'orange' },
        { key: 1, label: 'pineapple', value: 'pineapple' },
      ],
      selectedItem: [],
    };
    
    <Checkbox
      label="Select Fruit"
      options={state.fruits}
      selectedItem={state.selectedItem}
      onChange={(event) => {
        if (state.selectedItem.indexOf(event.target.value) !== -1) {
          let fruits = state.selectedItem.filter(function(item) {
            return item !== event.target.value;
          });
          setState({
            selectedItem: fruits,
          });
        } else {
          setState({
            selectedItem: [...state.selectedItem, event.target.value],
          });
        }
      }}
      isRequired
      isError
      errorMessage="This field is a compulsory field."
    />

    Without object

    Demo

    import Checkbox from '@hawk-ui/checkbox';
    initialState = {
      isChecked: false,
    };
    
    <Checkbox
      label="Select Checkbox"
      title="Title"
      value="title"
      isChecked={state.isChecked}
      onChange={(event) => {
        setState({
          isChecked: !state.isChecked,
        });
      }}
      htmlAttributes={{
        disabled: true,
      }}
    />

    Install

    npm i @hawk-ui/checkbox

    DownloadsWeekly Downloads

    5

    Version

    2.13.1

    License

    MIT

    Unpacked Size

    35.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar