Skip to main content
Browse docs

Marwes documentation

Radio

Native single-selection family with a RadioGroupField component, a canonical RadioGroupField path, and thin purpose-radio wrappers for common one-of-many choices.

What this family solves

Native single-selection family with a RadioGroupField component, a canonical RadioGroupField path, and thin purpose-radio wrappers for common one-of-many choices.

Use when

  • The UI needs one mutually exclusive choice from a small peer set, with optional description or error support.
  • The product flow maps clearly to YesNoRadioGroup, RatingRadioGroup, or OptionRadioGroup and benefits from self-documenting purpose metadata.
  • The team wants React and Vue radio behavior to stay aligned through one core recipe, shared field helpers, and the existing radio contract.

Avoid when

  • Multiple selections are allowed and CheckboxField or CheckboxGroupField is the more honest interaction model.
  • A binary on/off toggle is being modeled and SwitchField is the clearer product contract.
  • The layout cannot supply honest group labeling, shared names, and single-selection behavior for RadioGroupField usage outside RadioGroupField.

Public imports

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

React — @marwes-ui/react

Components

OptionRadioGroup, RadioGroupField, RatingRadioGroup, YesNoRadioGroup

Types

OptionRadioGroupProps, RadioGroupFieldOption, RadioGroupFieldProps, RatingRadioGroupProps, YesNoRadioGroupProps

Vue — @marwes-ui/vue

Components

OptionRadioGroup, RadioGroupField, RatingRadioGroup, YesNoRadioGroup

Types

OptionRadioGroupProps, RadioGroupFieldOption, RadioGroupFieldProps, RatingRadioGroupProps, YesNoRadioGroupProps

Svelte — @marwes-ui/svelte

Components

OptionRadioGroup, RadioGroupField, RatingRadioGroup, YesNoRadioGroup

Types

OptionRadioGroupProps, RadioGroupFieldOption, RadioGroupFieldProps, RatingRadioGroupProps, YesNoRadioGroupProps

Verified minimal examples

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

React

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

export function Example() {
  const [value, setValue] = useState("1")

  return (
    <RadioGroupField
      name="options"
      label="Group label"
      options={[
        { value: "1", label: "Label" },
        { value: "2", label: "Label" },
        { value: "3", label: "Label" },
      ]}
      value={value}
      onChange={setValue}
    />
  )
}

Vue

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

const value = ref("1")
</script>

<template>
  <RadioGroupField
    name="options"
    label="Group label"
    :options="[
      { value: '1', label: 'Label' },
      { value: '2', label: 'Label' },
      { value: '3', label: 'Label' },
    ]"
    v-model="value"
  />
</template>

Svelte

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

  let value = $state("1")
</script>

<OptionRadioGroup
  name="options"
  label="Group label"
  options={[
    { value: "1", label: "Label" },
    { value: "2", label: "Label" },
    { value: "3", label: "Label" },
  ]}
  {value}
  onchange={(nextValue) => (value = nextValue)}
/>

Accessibility requirements

  • Honest group semantics: Keep radio group semantics honest; never build a single-choice control from checkboxes.
  • Keyboard navigation: Verify keyboard arrow-key navigation moves focus and selection together within the group.
  • Connected field wiring: Use the public Field component so labels, helper text, errors, and invalid state stay connected.
  • Manual review boundary: Real browser review for focus visibility and pressed or hover affordances because the family heavily restyles a native radio with appearance: none.
  • Manual review 2: Product-level judgment about whether required messaging, helper text, and error text remain clear for real grouped choice flows.
  • Manual review 3: RadioGroupField usage outside RadioGroupField still depends on consumer-owned radiogroup naming and state management, so bespoke layouts deserve spot checks.

Theming

Radio 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