Design system
Documentation experienceDS-07

Home / Components / Radio

Approved

Radio

Provide the governed NexWell Radio contract for input & control interfaces.

Purpose

Provide the governed NexWell Radio contract for input & control interfaces.

Source evidence informs purpose and anatomy; NexWell tokens, accessibility, and API are authoritative.

When to use

Use Radio only for its documented input & control purpose.

When not to use

Do not restyle it into an unrelated interaction.

Anatomy

  1. container
  2. content

Specifications, variants, sizes, and states

Specifications

  • Exact dimensions, padding, gaps, icon sizes, radius, and typography: source-verification-required.
  • Implementation behavior is inspectable below; it is not evidence of founder approval.

Variants and sizes

Purpose-led variants only.

source-verification-required: no governed component-specific size matrix is available

States

unchecked · checked · focus-visible · disabled · invalid

Measurements and typography

Every field is represented. A status is not a value: unresolved evidence cannot be converted into an implementation number.

Height / widthsource-verification-requiredNo approved exact value may be inferred.
Paddingsource-verification-requiredNo approved exact value may be inferred.
Gapsource-verification-requiredNo approved exact value may be inferred.
Radius / bordersource-verification-requiredNo approved exact value may be inferred.
Icon sizesource-verification-requiredNo approved exact value may be inferred.
Font / size / weight / line height / trackingsource-verification-requiredNo approved exact value may be inferred.

State matrix

Actual implementation states are listed below. Requested universal states not supported by the component API remain explicitly unclaimed.

Defaultnot-applicable-or-source-verification-required
Hovernot-applicable-or-source-verification-required
FocusImplemented / inspect preview
Active / pressednot-applicable-or-source-verification-required
DisabledImplemented / inspect preview
Loadingnot-applicable-or-source-verification-required
Errornot-applicable-or-source-verification-required
Successnot-applicable-or-source-verification-required
Readonlynot-applicable-or-source-verification-required
Emptynot-applicable-or-source-verification-required

React and TypeScript API

Public properties

approved-current Generated from the package registry; controls expose only the supported subset listed here.

labeldescriptionnative input props
import { Radio } from "@nexwellaifactory/components";
// label
// description
// native input props

export function Example() {
  return <Radio />;
}

Open stable isolated canvas

Usage and content

Do

Use the component for its documented purpose.

Don’t

Do not restyle it into an unrelated interaction.

Content rules

  • Use concise, task-specific labels.
  • Do not communicate state through color alone.
  • Allow localized text to wrap without hiding critical actions.

Accessibility, keyboard, responsive, and RTL

Accessibility

  • Native semantics first
  • Accessible name required
  • State exposed programmatically

Keyboard

  • Native element behavior
  • Visible focus indicator
  • No positive tabindex

Responsive and RTL

Wraps or scrolls without hiding critical content; supports 200% text expansion.

Uses logical layout; mirrors only spatial meaning.

Actual package output

Interactive example

Preview width changes the bounded canvas; use the RTL control below to inspect logical layout.

Token mapping and source evidence

Traceable implementation

Uber-derived structural evidence, adapted through approved NexWell decisions.

semantic colorfoundation spacingfoundation shapefoundation motion

docs/source-audit/component-evidence-matrix.csv :: radio

Missing fields in the source remain documented source absence, not requirements invented by the implementation.

Evidence completeness

12 associated local source records. Statuses below come directly from the DS-13 Checkpoint 1 component evidence matrix.

overviewpartial
anatomypartial
variantssource-verification-required
sizespartial
dimensionssource-verification-required
paddingsource-verification-required
gapssource-verification-required
icon_sizessource-verification-required
typographysource-verification-required
width_behaviorsource-verification-required
content_behaviorsource-verification-required
truncation_wrappingsource-verification-required
statespartial
accessibilitypartial
keyboardpartial
responsivepartial
rtlsource-verification-required
motionsource-verification-required
react_apipartial
token_mappingsource-verification-required
implementation_mappingsource-verification-required
visual_redlinessource-verification-required
testssource-verification-required

Cross-platform implementation

React / TypeScript: current package API is shown above.

Flutter: source-verification-required — no canonical Flutter API or implementation mapping exists, and this web portal does not infer one.

AI agents: consume approved records only; preserve proposed and unresolved statuses and import the public component instead of recreating it.