Checkbox

The Checkbox component is a UI element that allows users to select or deselect options. It supports custom styling, various sizes.

Import

Phaselis exports one main component for Checkbox.

import { Checkbox } from "phaselis";

• Checkbox: Main Component import for Checkbox

Usage

Basic Checkbox

import { Checkbox } from "phaselis";

const Example = () => {
  return <Checkbox text="Phaselis Checkbox" size="md" name="1" value={true} />;
};

export default Example;

Props

The props provide various properties for customizing the checkbox component, including options for styling, event handling, and state control.

disabled

boolean

If true, the checkbox will be disabled.

<Checkbox disabled text="Disabled Checkbox" />

text

string

Text to display next to the checkbox.

<Checkbox text="Option" />

style

Name	Type	Description
container	ViewStyle	Style for the checkbox container
element	ViewStyle	Style for the checkbox element
icon	IconStyle	Style for the checkbox icon
text	TextStyle	Style for the checkbox text

Optional custom styles for the checkbox components.

// Object with named styles
<Checkbox
  text="Custom styled checkbox"
  style={{
    icon: { color: "#0d6efd" },
    text: { fontWeight: "bold" },
    element: { borderColor: "#b9e0ff", borderRadius: 4 },
    container: { marginVertical: 8 }
  }}
/>

// Direct element styling
<Checkbox
  text="Direct element style"
  style={{ borderWidth: 2, borderColor: "#007bff", borderRadius: 4 }}
/>

containerStyle

ViewStyle

Additional style applied directly to the checkbox container.

<Checkbox text="Option" containerStyle={{ marginBottom: 10 }} />

iconStyle

IconStyle

Additional style applied directly to the checkbox icon.

<Checkbox iconStyle={{ color: 'purple' }} text="Purple check" />

textStyle

TextStyle

Additional style applied directly to the checkbox text.

<Checkbox textStyle={{ fontWeight: 'bold' }} text="Bold text" />

pressed

boolean

A value indicating whether the checkbox is checked.

<Checkbox text="Phaselis" value={true} />

size

ComponentSize

Size of the checkbox. Default is md.

<Checkbox text="Phaselis" size="lg" />

onBlur

(event: any, value: any, ...args: any[]) => any

Event handler for when the checkbox loses focus.

<Checkbox
  text="Phaselis 1"
  onBlur={() => {
    console.log("Lose Focus");
  }}
/>
<Checkbox
  text="Phaselis 2"
  onBlur={() => {
    console.log("Lose Focus");
  }}
/>

onChange

(e: ChangeEvent<HTMLInputElement> | ICheckableEventType, value: boolean) => any

Event handler for when the checkbox state changes.

<Checkbox
  text="Phaselis"
  onChange={() => {
    console.log("Change Value");
  }}
/>

iconName

SlotIconName

You can pass any Lucide icon name to be displayed when the checkbox is checked.

<Checkbox iconName="X" text="Option 1" />

IconSlot

SlotChildComponent

You can pass any component to the checkbox.

import { LucideIcon } from "phaselis";

<Checkbox
  size="xl"
  IconSlot={() => <LucideIcon name="Car" size={"xl"} />}
/>

name

string

The name prop is used to assign an identifying name to a checkbox.

<Checkbox name="option-1" />
<Checkbox name="option-2" />

partofform

boolean

The partOfForm prop is used to indicate whether the component is part of a form. If the partOfForm variable is set to false, it disconnects the component from the form.

<Checkbox name="option-1" />
<Checkbox name="option-2" partofform={false} />

validations

Function[]

The validations prop is used to provide an array of validation functions for the component. Each function in the array applies specific validation rules to the component’s input.

import { Button, Form, InputGroup, required } from "phaselis";

<Form>
  <InputGroup label="">
    <Checkbox
      name="option-9"
      text="I agree"
      validations={[required("required")]}
    />
  </InputGroup>
  <Button type="submit" text="submit" />
</Form>

resetValue

any

The resetValue variable is used to define the component's default value when the reset button is pressed, provided the component is part of a Form. When the reset is triggered, this variable ensures that the component reverts to its specified initial state.

import { Button, Form } from "phaselis";

<Form>
  <Checkbox name="checkbox-1" value={true} resetValue={false} />
  <Button type="reset" text="Reset" />
</Form>

variation

default | primary | secondary | tertiary

Determines the style of the checkbox.

• default: Applies the default checkbox style.
• primary: Applies the primary checkbox style.
• secondary: Applies the secondary checkbox style.
• tertiary: Applies the tertiary checkbox style.

<Checkbox variation="tertiary" />