Switch

Guidelines
React API Reference
Blazor API Reference

Switches provide a way for users to toggle between two states (on/off, enabled/disabled) with immediate effect, offering clear visual feedback for binary choices and settings.

Guidance

Aspect	Best Practice
Usage	Use for binary states that take effect immediately. Ideal for enabling/disabling features, settings, or preferences that don’t require confirmation.
Content	Use clear, descriptive labels that indicate what will happen when the switch is toggled. Avoid ambiguous language.
Behavior	Changes should take effect immediately without requiring additional confirmation. Provide clear visual feedback for state changes.
States	Clearly distinguish between on/off states with color, position, and other visual indicators. Include disabled and focused states.
Feedback	Use smooth animations for state transitions. Provide immediate visual confirmation of the current state.
Examples	Feature toggles, notification settings, privacy controls, accessibility options, or any binary preference that applies immediately.

Best Practices

Immediate Effect: Switch changes should take effect immediately without requiring a save action.
Clear Labeling: Use descriptive labels that clearly indicate what the switch controls.
Visual Distinction: Make on/off states visually distinct through color, position, and other indicators.
Consistent Behavior: Maintain consistent switch behavior throughout the application.
Accessible Design: Ensure switches work with keyboard navigation and screen readers.
Appropriate Usage: Use switches for settings that apply immediately, not for form submissions.

Do’s and Don’ts

Do

Use for binary choices that take effect immediately.
Provide clear labels indicating what the switch controls.
Show the current state clearly with visual indicators.
Include smooth transitions between states.

Don't

Use for actions that require confirmation or have significant consequences.
Use ambiguous labels that don’t clearly indicate the switch’s purpose.
Make switches too small for easy interaction on touch devices.
Use switches for form fields that require explicit submission.

Additional Guidance

Psychological Impact:
- Immediate Control: Switches give users a sense of direct, immediate control over settings and features.
- Clear State Awareness: Visual state indicators help users understand current settings at a glance.
- Confident Interaction: The physical metaphor of a toggle switch makes the interaction feel familiar and predictable.

Import

import { Switch } from '@strongtie/design-system/switch';

Usage

<Switch />

Props

checked

boolean

The controlled checked state of the switch.

defaultChecked

boolean

The default checked state when first rendered.

onCheckedChange

(checked: boolean) => void

Event handler called when the checked state changes.

disabled

boolean

default:"false"

When true, prevents the user from interacting with the switch.

name

string

The name of the switch. Submitted with its form data.

value

string

default:"on"

The value given as data when submitted with a name.

required

boolean

When true, indicates that the user must check the switch before submitting the form.

Usage Examples

<Switch defaultChecked={false} />

Styling Classes

The following CSS classes are applied by the Switch component:

switch – Root switch container with state styling and interaction handling
switch-thumb – Movable thumb element that slides between on/off positions

For more examples, visit the Storybook.

Example

<StudsSwitch @bind-Value="isEnabled" Change="@(value => HandleChange(value))" />

@code {
    private bool isEnabled;

    private void HandleChange(bool value)
    {
        Console.WriteLine($"Switch value changed to: {value}");
    }
}

Parameters

Value

bool

Gets or sets the value of the switch. True represents on/checked, false represents off/unchecked.

ValueChanged

EventCallback<bool>

Gets or sets the callback that is invoked when the Value is changed.

Change

EventCallback<bool>

Gets or sets the callback that is invoked when the switch is toggled.

InputAttributes

IReadOnlyDictionary<string, object>

Specifies additional custom attributes that will be rendered by the input element.

Name

string

Gets or sets the name attribute of the switch.

Disabled

bool

default:"false"

If true, the switch will be disabled and cannot be toggled.

TabIndex

int

Gets or sets the tab index for the switch.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Usage Examples

<StudsSwitch @bind-Value="isEnabled" />

@code {
    bool isEnabled = false;
}

Styling Classes

The following CSS classes are applied by the Switch component:

switch – Root switch container with state management and interaction
switch.-checked – Applied when the switch is in the checked/on state
switch-graphic – Visual switch representation with thumb and track
switch-graphic.-disabled – Applied when the switch is disabled

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

Props

Usage Examples

Styling Classes

Parameters

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​Props

​Usage Examples

​Styling Classes

​Parameters

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

Props

Usage Examples

Styling Classes

Parameters

Usage Examples

Styling Classes