Basic Checkbox

Checked Checkbox

Disabled Checkbox

Checked and Disabled

Color Variants

Required Checkbox

Toggle Switches

Basic Toggle

Checked Toggle

Toggle Sizes

Disabled Toggle

Radio Buttons

Basic Radio Group

Checked Radio

Radio Color Variants

Disabled Radio

Documentation

Basic Usage

<x-checkbox label="Label text" name="checkbox1" value="test" />

Checkbox Props

  • label - string

    Text displayed next to the checkbox

  • name - string

    Input name attribute

  • value - string

    Input value attribute

  • checked - bool

    Checkbox starts in checked state

  • disabled - bool

    Disable the checkbox

  • color - string

    Checkbox color variant: primary, secondary, success, warning, error, sky. Default: primary

  • required - bool

    Make the checkbox required

  • id - string

    Input ID attribute (auto-generated if not provided)

Examples

Basic checkbox:

<x-checkbox label="Label" name="checkbox1" value="test" />

Checked:

<x-checkbox label="Label" name="checkbox1" value="test" checked />

Disabled:

<x-checkbox label="Label" name="checkbox1" value="test" disabled />

Color variant:

<x-checkbox label="Label" name="checkbox1" value="test" color="success" />

Required:

<x-checkbox label="Label" name="checkbox1" value="test" required />

Toggle Component

Basic Usage
<x-toggle label="Label text" name="toggle1" />
Toggle Props
  • label - string

    Text displayed next to the toggle

  • name - string

    Input name attribute

  • value - string

    Input value attribute (default: "1")

  • checked - bool

    Toggle starts in checked state

  • disabled - bool

    Disable the toggle

  • size - string

    Toggle size: sm, lg. Default: normal

  • required - bool

    Make the toggle required

Radio Component

Basic Usage
<x-radio name="gender" value="male" label="Male" />
<x-radio name="gender" value="female" label="Female" />

Note: Radio buttons with the same name form a group where only one can be selected.

Radio Props
  • label - string

    Text displayed next to the radio button

  • name - string

    Input name attribute (must be same for radio group)

  • value - string

    Input value attribute (required, must be unique within group)

  • checked - bool

    Radio starts in checked state

  • disabled - bool

    Disable the radio button

  • color - string

    Radio color variant: primary, secondary, success, warning, error, sky. Default: primary

  • required - bool

    Make the radio button required