Photonix UI - React Components, Templates & Figma Design System

SelectCheck

A selection control that combines a circular checkbox with a label.

Preview

Select Item

Usage

import { SelectCheck } from '@photonix/ultimate';

<SelectCheck 
  label="Option A" 
  checked={isSelected} 
  onChange={setIsSelected} 
/>

Component API

SelectCheck

Prop	Type	Default	Description
checked	`boolean`	`false`	Whether the control is checked/selected
label	`React.ReactNode`	`-`	Label text for the control
onChange	`((checked: boolean) => void)`	`-`	Callback when state changes

Variants

Basic Controlled

A simple controlled selection.

Select me

Basic Controlled

const [checked, setChecked] = useState(false);

<SelectCheck 
  label="Select me" 
  checked={checked} 
  onChange={setChecked} 
/>

States

Checked, unchecked, and disabled states.

CheckedUncheckedDisabledDisabled Checked

States

<SelectCheck label="Checked" checked={true} />
<SelectCheck label="Unchecked" checked={false} />
<SelectCheck label="Disabled" disabled />
<SelectCheck label="Disabled Checked" disabled checked />

SelectCheck

Preview

Component API

SelectCheck

Variants

Basic Controlled

States

On this page