WelkUI!REACT EDITION

Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkRadioGroup

A native fieldset and legend containing labeled radio options. It manages one selected string value and can disable the entire group or individual options. Use value/onValueChange for controlled selection or defaultValue for local form state.

Choose your role

HeroSidekick

Usage

React / TSX

import { WelkRadioGroup } from "@welkui/react";

<WelkRadioGroup label="Choose your role" name="role"
  defaultValue="hero" options={[
    { label: "Hero", value: "hero" },
    { label: "Sidekick", value: "sidekick" },
  ]} />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

One grouped radio presentation with optional per-option disabled states.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Uncontrolled selection

Starts with Hero selected. Selecting Sidekick unchecks Hero.

Starting team role

HeroSidekickVillain (unavailable)

Key propsdefaultValue="hero" options={options}

Controlled feedback

The callback updates both the selected option and visible output.

Live role

HeroSidekickVillain (unavailable)

Current value: (empty)

Key propsvalue={role} onValueChange={setRole}

Disabled group

The native fieldset disables every option at once.

Locked team role

HeroSidekickVillain (unavailable)

Key propsdisabled

Usage notes and accessibility

Use for one choice from a visible set of options. Use a dropdown when the list is long, or checkboxes when multiple choices are allowed.
Each option needs a unique string value. defaultValue selects the initial choice; value/onValueChange makes the group controlled.
The label is rendered as a legend. A shared native name is generated unless supplied; required enables native validation and disabled on the fieldset disables the group.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkRadioGroup prop reference
Prop	Type	Default	Description
`label`	`ReactNode`	Required	Visible, accessible control label.
`options`	`readonly WelkRadioOption[]`	Required	Options: { label: ReactNode, value: string, disabled?: boolean }.
`value`	`string`	Uncontrolled	Controlled selected option value.
`defaultValue`	`string`	Unset	Initially selected option value.
`onValueChange`	`(value: string) => void`	Unset	Called when an option is selected.
`required`	`boolean`	false	Requires a selection in the native form.
`name`	`string`	Generated	Shared native form field name for all options.

Native props and refs

Inherits native fieldset props except children, onChange and defaultValue, including disabled, form, className, style and aria-*; forwards a fieldset ref.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.