checked- Type
boolean- Default
- -
- Description
- Controlled checked state.
Components / Inputs
Switch
மாற்றி
Use a switch for settings that take effect immediately. The label should describe the setting, not the action.
உடனடியாக அமலாகும் அமைப்புகளுக்கு மாற்றியைப் பயன்படுத்தவும். லேபிள் செயலை அல்ல, அமைப்பை விளக்க வேண்டும்.
Basic
Component preview
Settings listஅமைப்புகள் பட்டியல்Usage
- Use switches for preferences that save immediately.
- Use checkboxes when the user reviews choices and submits a form.
- Keep labels short and place helper text under the label, not beside the switch.
Anatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
Track
பாதைrequired<button>Pill-shaped toggle with role=switch. 44x24px rounded-full. Off state: bg-input (gray). On state: bg-primary (brand). Smooth color transition. Keyboard: Space to toggle. Focus ring on :focus-visible.
2
Thumb
குறி<span>Circular thumb (20x20px) sliding between left (off) and right (on) via translate-x. White fill with subtle shadow. CSS transition-transform for smooth animation.
3
Label
லேபிள்required<label>Descriptive label paired via htmlFor. Should name what the switch controls — not just Enable but Enable Tamil notifications. Click toggles the switch.
4
Hint
குறிப்புMuted subtext at text-xs providing context about the switch effect. Connected via aria-describedby. States what happens when toggled.
API
Props
defaultChecked- Type
boolean- Default
false- Description
- Initial checked state.
onCheckedChange- Type
(checked: boolean) => void- Default
- -
- Description
- Runs when the value changes.
disabled- Type
boolean- Default
false- Description
- Prevents interaction.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Controlled checked state. |
defaultChecked | boolean | false | Initial checked state. |
onCheckedChange | (checked: boolean) => void | - | Runs when the value changes. |
disabled | boolean | false | Prevents interaction. |
Best practices
Use Switch for settings that take immediate effect
உடனடியாக அமலாகும் அமைப்புகளுக்கு Switch பயன்படுத்தவும்
Switches are ideal for on/off preferences like notifications or dark mode that activate without a Save button.
அறிவிப்புகள் அல்லது இருண்ட நிலை போன்ற உடனடி அமைப்புகளுக்கு Switch மிகவும் பொருத்தமானது.
Don't use Switch inside a form requiring a Save button
சேமி பொத்தான் தேவைப்படும் படிவங்களில் Switch பயன்படுத்தாதே
If users must click Save for changes to apply, use Checkbox instead — Switch implies immediate effect.
மாற்றங்கள் சேமிக்கப்பட வேண்டுமென்றால் Checkbox பயன்படுத்தவும் — Switch உடனடி அமலை குறிக்கிறது.
Show a state label beside the switch
மாற்றியின் அருகில் நிலை லேபிள் காட்டவும்
Show 'இயக்கு / முடக்கு' or 'On / Off' beside the switch so the current state is unambiguous.
'இயக்கு' அல்லது 'முடக்கு' என்று தெளிவான நிலை லேபிள் காட்டி மாற்றியின் தற்போதைய நிலையை தெளிவாக்கவும்.
Don't use Switch for multi-select
பல தேர்வுக்கு Switch பயன்படுத்தாதே
When users need to select multiple independent options, use Checkboxes — not a set of switches.
பல தனிமையான விருப்பங்கள் தேர்வு செய்ய Checkbox பயன்படுத்தவும் — Switch அல்ல.