CheckBox

Default CheckBox


      const CheckboxExample = () =>
      <Checkbox id='checkbox' label= 'Checkbox' />;

Animated Checkbox

slide

    const CheckboxExample = () =>
      <Checkbox
        animationProps={{
          hover: {
            key: 'slide',
            option: {
              duration: '1s',
              delay: '0s',
              direction: 'top',
            },
          },
        }}
      >
        hover me!
      </Checkbox>

duration 1 s

duration 2 s

duration 3 s

duration 4 s

duration 5 s

squeeze

    const CheckboxExample = () =>
      <Checkbox
        animationProps={{
          hover: {
            key: 'squeeze',
            option: {
              duration: '1s',
              delay: '0s',
              direction: 'top',
            },
          },
        }}
      >
        hover me!
      </Checkbox>

duration 1 s

duration 2 s

duration 3 s

duration 4 s

duration 5 s

bgColorFade

    const CheckboxExample = () =>
      <Checkbox
        animationProps={{
          hover: {
            key: 'bgColorFade',
            option: {
              duration: '1s',
              delay: '0s',
              direction: 'top',
            },
          },
        }}
      >
        hover me!
      </Checkbox>

duration 1 s

duration 2 s

duration 3 s

duration 4 s

duration 5 s

shake

    const CheckboxExample = () =>
      <Checkbox
        animationProps={{
          hover: {
            key: 'shake',
            option: {
              duration: '1s',
              delay: '0s',
              direction: 'top',
            },
          },
        }}
      >
        hover me!
      </Checkbox>

duration 1 s

duration 2 s

duration 3 s

duration 4 s

duration 5 s