Components

Component

Switch

Immediate on/off control for settings and binary state.

ReactReact Native7 props
PreviewReact

Imports

import { Switch } from "@hozorica/hods-react";
import { Switch } from "@hozorica/hods-react-native";

Props

PropTypeDescription
checked / defaultCheckedbooleanControlled and uncontrolled checked state.
onCheckedChange(checked: boolean) => voidCalled when the switch value changes.
labelReactNodeOptional visible label.
size16 | 24 | 32Track size. Defaults to 32.
tonebrand | neutralChecked-state visual tone.
disabled / invalid / requiredbooleanState flags forwarded to the accessible control.
inputPropsInputHTMLAttributesWeb-only props for the hidden input element.

Platform Support

React

Renders a labelled checkbox input with role=switch and a token-styled Switchmark.

React Native

Uses Pressable with accessibilityRole=switch and shared size/tone props.

Usage

<Switch label="Notifications" defaultChecked onCheckedChange={(checked) => console.log(checked)} />

Notes

  • Use Switch for settings that apply immediately.
  • Use Checkbox when the value is submitted later with a form group.
  • Switchmark is exported for custom layouts that need only the visual switch control.