CheckBox

Props

NameTypeDescription
checkboxIconL.IconTypes.Icons | false | null

Checkbox icon, it is independent from the value, see examples

childrenReact.NodeLabel content
defaultValuebooleanWhere to start
idstringJust an id
isDisabledbooleanIn case you don't want it to be active
onChange(ev: ChangeEvent) => voidChange handler
shouldRender
boolean
Pass false if you don't want the component to appear
themePartialGlobalDefaultTheme[ typeof COMPONENTS_NAMESPACES.checkBox ]...
valuebooleanValue
_[className]
[x: string]: unknown
E.g.: _w-48 adds a css class w-48 to the component's outer wrapper.

Examples

  • Basic
  • Custom icons
  • Colored
  • Semi
() => {
  const [value, setValue] = React.useState(true);

  return (
    <L.CheckBox
      onChange={({ component }) => setValue(component.value)}
      value={value}
    >
      click me
    </L.CheckBox>
  );
}

Validation

NameTypeDescription
form
string
Form name
name
string
Component name
isRequired
boolean
If you don't want the field to be empty
isValid
boolean
Controlled valid state
invalidMessage
ReactNode
Text to show when the value does not match requirements
requiredMessage
ReactNode
Text to show when the field is not filled
shouldValidateUnmounted
boolean
The field can still affect form submission even if it is not rendered
validator
Validator | PredefinedValidator | RegExp | ValidatorObject[]
interface Validator { (value: any): boolean, }

A validator is a function that takes a value and returns true or false depending on the logic it contains

E.g. (value) => value.length > 4

type PredefinedValidator = | 'creditCardNumber' | 'email' | 'url'

See predefined validators

interface ValidatorObject { validator: PredefinedValidator | RegExp | Validator, invalidMessage?: string, }

ValidatorObject is useful wnen you need to validate a value against several validators and show inividual messages for each.
Just use an array of validator objects.

E.g.

[ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

Examples

  • Form
  • Required
() => {

  return (
    <>
      <L.CheckBox
        form='demoCheckBoxForm'
        name='checkbox'
        _mb-2
      >
        click me
      </L.CheckBox>

      <L.Button
        form='demoCheckBoxForm'
        onClick={({ form }) => log(form)}
      >
        Submit
      </L.Button>
    </>
  );
}