Checkbox

Checkbox component to render input type checkbox along with some other properties.

Usage

The Checkbox component can be imported using

import { Checkbox } from '@tail-kit/tail-kit'

Default Checkbox

Remember Me

<Checkbox label="Remember Me" value="rememberMe" />

<Checkbox label="Remember Me" value="rememberMe" />

Disabled Checkbox

Unchecked-Disabled

Checked-Disabled

<div className="flex flex-col space-y-2">
  <Checkbox disabled={true} label="Unchecked-Disabled" />

  <Checkbox disabled={true} defaultChecked={true} label="Checked-Disabled" />
</div>

<div className="flex flex-col space-y-2">
  <Checkbox disabled={true} label="Unchecked-Disabled" />

  <Checkbox disabled={true} defaultChecked={true} label="Checked-Disabled" />
</div>

Checkbox with Error

I agree to the terms and conditions

function CheckboxWithError() {
  const [termsAgreed, setTermsAgreed] = React.useState(false)
  return (
    <Checkbox
      checked={termsAgreed}
      onChange={() => setTermsAgreed((prevState) => !prevState)}
      label="I agree to the terms and conditions"
      error={!termsAgreed}
    />
  )
}

function CheckboxWithError() {
  const [termsAgreed, setTermsAgreed] = React.useState(false)
  return (
    <Checkbox
      checked={termsAgreed}
      onChange={() => setTermsAgreed((prevState) => !prevState)}
      label="I agree to the terms and conditions"
      error={!termsAgreed}
    />
  )
}

Indeterminate Checkbox

Check All

Apple

Pear

Orange

function IndeterminateCheckbox() {
  const options = ['Apple', 'Pear', 'Orange']
  const [checkedValues, setCheckedValues] = React.useState(['Pear'])
  const handleChange = (checkedList) => {
    setCheckedValues(checkedList)
  }
  return (
    <div className="inline-block p-4 space-y-4">
      <Checkbox
        label="Check All"
        checked={
          checkedValues.length === options.length
            ? true
            : checkedValues.length === 0
            ? false
            : 'indeterminate'
        }
        onChange={(event) => {
          if (event.target.checked) {
            setCheckedValues(options)
          } else {
            setCheckedValues([])
          }
        }}
      />
      <div className="border border-gray-200" />
      <Checkbox.Group
        options={options}
        value={checkedValues}
        onChange={handleChange}
      />
    </div>
  )
}

function IndeterminateCheckbox() {
  const options = ['Apple', 'Pear', 'Orange']
  const [checkedValues, setCheckedValues] = React.useState(['Pear'])
  const handleChange = (checkedList) => {
    setCheckedValues(checkedList)
  }
  return (
    <div className="inline-block p-4 space-y-4">
      <Checkbox
        label="Check All"
        checked={
          checkedValues.length === options.length
            ? true
            : checkedValues.length === 0
            ? false
            : 'indeterminate'
        }
        onChange={(event) => {
          if (event.target.checked) {
            setCheckedValues(options)
          } else {
            setCheckedValues([])
          }
        }}
      />
      <div className="border border-gray-200" />
      <Checkbox.Group
        options={options}
        value={checkedValues}
        onChange={handleChange}
      />
    </div>
  )
}

With Checkbox Group

function WithCheckboxGroup() {
  const plainOptions = ['Apple', 'Pear', 'Orange']
  const options = plainOptions.map((item) => ({
    label: item,
    value: item,
  }))
  const optionsWithDisabled = plainOptions.map((item) => ({
    label: item,
    value: item,
    disabled: item === 'Orange',
  }))
  const handleChange = (checkedList) => {
    console.log(checkedList)
  }
  return (
    <div className="space-y-6">
      <Checkbox.Group
        options={plainOptions}
        value={['Apple', 'Orange']}
        onChange={handleChange}
      />
      <Checkbox.Group
        options={options}
        value={['Pear']}
        onChange={handleChange}
      />
      <Checkbox.Group
        options={optionsWithDisabled}
        value={['Apple']}
        onChange={handleChange}
      />
    </div>
  )
}

function WithCheckboxGroup() {
  const plainOptions = ['Apple', 'Pear', 'Orange']
  const options = plainOptions.map((item) => ({
    label: item,
    value: item,
  }))
  const optionsWithDisabled = plainOptions.map((item) => ({
    label: item,
    value: item,
    disabled: item === 'Orange',
  }))
  const handleChange = (checkedList) => {
    console.log(checkedList)
  }
  return (
    <div className="space-y-6">
      <Checkbox.Group
        options={plainOptions}
        value={['Apple', 'Orange']}
        onChange={handleChange}
      />
      <Checkbox.Group
        options={options}
        value={['Pear']}
        onChange={handleChange}
      />
      <Checkbox.Group
        options={optionsWithDisabled}
        value={['Apple']}
        onChange={handleChange}
      />
    </div>
  )
}

Checkbox Props

Name	Description	Default Value
checked	HTML checked attribute for input element to set input status true or false `boolean \| "indeterminate" \| undefined`	--
disabled	Use disbaled property to disable user input in checkbox `boolean \| undefined`	--
onChange	The callback function that is triggered when the state changes `((event: ChangeEvent<HTMLInputElement>) => void) \| undefined`	--
className	Additional class applied to checkbox `string \| undefined`	--
style	Styles property to apply on the entire Checkbox component `CSSProperties \| undefined`	--
defaultChecked	Default checked property to intialize component `boolean \| undefined`	--
label	To show label on the right side of checkbox `ReactNode`	--
error	Error property to render checkbox border and label text in red whenever error occurs `boolean \| undefined`	--

Checkbox.Group Props

Name	Description	Default Value
options	Specifies options of checkbox to render `(string \| OptionType)[]`	--
value	Default selected values `string[] \| undefined`	--
disabled	If disable all checkboxes `boolean \| undefined`	--
onChange	The callback function that is triggered when the state changes `((checkedValues: string[]) => void) \| undefined`	--
className	Additional class to apply on each individual checkbox `string \| undefined`	--
style	Apply styles on each individual checkbox `CSSProperties \| undefined`	--