Checkbox

Examples

Showcase

Theme:

Dark Modern

import {ReactNode} from "react"

import {Checkbox} from "@qui/react-vscode"

export default function Showcase(): ReactNode {
  return (
    <div className="grid justify-center">
      <form className="grid grid-cols-4 grid-rows-3 items-center gap-x-8 gap-y-4">
        <div />
        <div className="text-foreground">Checked</div>
        <div className="text-foreground">Unchecked</div>
        <div className="text-foreground">Indeterminate</div>

        <span className="text-foreground">Default</span>
        <Checkbox defaultChecked label="Label" />
        <Checkbox label="Label" />
        <Checkbox indeterminate label="Label" />

        <span className="text-foreground">Disabled</span>
        <Checkbox defaultChecked disabled label="Label" />
        <Checkbox disabled label="Label" />
        <Checkbox disabled indeterminate label="Label" />
      </form>
    </div>
  )
}

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
autoFocus If `true`, React will focus the component on mount.	boolean
checked Controlled value for the component.	boolean
defaultChecked Default state.	boolean
disabled If true, the component will not be interactive and will appear dimmed.	boolean	false
form Specifies the id of the `<form>` this input belongs to. If omitted, it’s the closest parent form.	string
id Controlled id. If omitted, a unique identifier will be automatically generated for accessibility.	string
indeterminate If true and the checkbox is not checked, the checkbox will be in the indeterminate state.	boolean
inputProps attributes applied to the `input` element. Use with caution.	InputHTMLAttributes<HTMLInputElement>	{}
inputRef Pass a ref to the input element.	Ref<HTMLInputElement>
invalid Indicates the entered value does not conform to the format expected by the application.	boolean
label Optional label describing the element. Recommended. This element is automatically associated with the component's input element for optimal accessibility.	ReactNode
name Specifies the name for this input that’s submitted with the form.	string
onBlur An Event handler function. Fires when the input element loses focus.	FocusEventHandler<HTMLInputElement>
onChange An Event handler function. Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example). Behaves like the browser input event with an additional parameter for easily accessing the value.	( event: ChangeEvent<HTMLInputElement>, checked: boolean, ) => void
onFocus An Event handler function. Fires when the input element gains focus.	FocusEventHandler<HTMLInputElement>
readOnly If true, the component is not editable by the user.	boolean	false
value A string representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the value given to the data submitted with the checkbox's name. If omitted and label is provided as a string, the label will be used as a fallback value.	string

An Event handler function. Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example). Behaves like the browser input event with an additional parameter for easily accessing the value.

onFocus

Type

FocusEventHandler<HTMLInputElement>

Description

An Event handler function. Fires when the input element gains focus.

readOnly

Type

boolean

Default

false

Description

If true, the component is not editable by the user.

value

Type

string

Description

A string representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the value given to the data submitted with the checkbox's name. If omitted and label is provided as a string, the label will be used as a fallback value.

Catalog Card

Dialog

Checkbox

Examples

Showcase

API

CheckboxProps