Skip to main content
Browse docs

Marwes documentation

Switch

Binary toggle family with a button-backed switch component, a canonical SwitchField path, and thin purpose-switch wrappers.

What this family solves

Binary toggle family with a button-backed switch component, a canonical SwitchField path, and thin purpose-switch wrappers.

Use when

  • The UI needs a binary on/off control with visible labeling and optional description or error support.
  • The product flow maps clearly to FeatureToggle, PreferenceSwitch, or PermissionSwitch and benefits from self-documenting purpose metadata.
  • The team wants React and Vue switch behavior to stay aligned through shared core helpers and one contract file.

Avoid when

  • A different control such as checkbox, radio, or tabs is the more honest interaction model.
  • The implementation only needs visual styling and cannot own naming or described-by wiring for a custom layout.
  • The team expects switch error handling to behave like text-input invalid semantics rather than described-by support.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

FeatureToggle, PermissionSwitch, PreferenceSwitch, SwitchField

Types

FeatureToggleProps, PermissionSwitchProps, PreferenceSwitchProps, SwitchFieldProps

Enum

SwitchSize

Vue — @marwes-ui/vue

Components

FeatureToggle, PermissionSwitch, PreferenceSwitch, SwitchField

Types

FeatureToggleProps, PermissionSwitchProps, PreferenceSwitchProps, SwitchFieldProps

Enum

SwitchSize

Svelte — @marwes-ui/svelte

Components

FeatureToggle, PermissionSwitch, PreferenceSwitch, SwitchField

Types

FeatureToggleProps, PermissionSwitchProps, PreferenceSwitchProps, SwitchFieldProps

Enum

SwitchSize

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { SwitchField } from "@marwes-ui/react"
import { useState } from "react"

export function Example() {
  const [checked, setChecked] = useState(false)

  return <SwitchField label="Label" switch={{ checked, onCheckedChange: setChecked }} />
}

Vue

<script setup lang="ts">
import { ref } from "vue"
import { SwitchField } from "@marwes-ui/vue"

const checked = ref(false)
</script>

<template>
  <SwitchField label="Label" :switch="{ checked, onCheckedChange: (v) => (checked = v) }" />
</template>

Svelte

<script lang="ts">
  import { SwitchField } from "@marwes-ui/svelte"

  let checked = $state(false)
</script>

<SwitchField
  label="Label"
  switch={{ checked, oncheckedchange: (nextChecked) => (checked = nextChecked) }}
/>

Accessibility requirements

  • Immediate on/off action: Use a switch only for an immediate on/off action, not a form submission or navigation trigger.
  • State announcement: Verify the switch state is announced immediately without requiring a separate submit action.
  • Connected field wiring: Use the public Field component so labels, helper text, errors, and invalid state stay connected.
  • Manual review boundary: Real browser and assistive-technology validation for checked-state announcements, focus visibility, and toggle feel.
  • Manual review 2: Future decisions about which switch stories should join stricter automated accessibility gates.
  • Manual review 3: Direct aria-labelledby usage if the family wants dedicated local proof beyond the current shared-contract surface.

Theming

Switch uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources