Photonix

SelectCheck

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

Preview

Usage
"use client";

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

export default function SelectCheckPreviewExample() {
    return <SelectCheck checked label="Selected option" />;
}

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.

Basic Controlled
"use client";

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

export default function SelectCheckExampleBasic() {
    const [checked, setChecked] = useState(false);

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

States

Checked, unchecked, and disabled states.

States
"use client";

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

export default function SelectCheckStatesExample() {
    return (
        <Flex direction="column" gap="md">
            <SelectCheck label="Checked" checked={true} onChange={() => {}} />
            <SelectCheck label="Unchecked" checked={false} onChange={() => {}} />
            <SelectCheck label="Disabled" disabled />
            <SelectCheck label="Disabled Checked" disabled checked />
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Basic Controlled
States
Photonix UI - React Components, Templates & Figma Design System