@nathan3boss/ui

    Radio

    The Radio component wraps the native input element with a themed outline and animated dot.

    Usage

    import React from 'react';
import { Radio } from '@nathan3boss/ui/radio';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame>
      <Radio label="Early access" />
    </ExampleFrame>
  );
};

    Grouping

    Share a name to allow only one option inside the group to be selected at a time.

    import React from 'react';
import { Radio } from '@nathan3boss/ui/radio';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame direction="column" gap="12px">
      <Radio defaultChecked label="Basic plan" name="plan" />
      <Radio label="Growth plan" name="plan" />
      <Radio label="Enterprise plan" name="plan" />
    </ExampleFrame>
  );
};

    Colors

    Use color to align the checked ring with validation outcomes.

    import React from 'react';
import { Radio } from '@nathan3boss/ui/radio';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame direction="column" gap="12px">
      <Radio color="success" defaultChecked label="Verified selection" />
      <Radio color="warning" defaultChecked label="Needs review" />
      <Radio color="danger" defaultChecked label="Action required" />
    </ExampleFrame>
  );
};

    API

    Radio

    Custom-styled radio built on top of the native input element.

    PropertyDescriptionTypeDefault Value
    labelRenders text or custom content alongside the control.ReactNode-
    sizeControls the dimensions of the radio indicator.RadioSize | undefinedmd
    colorApplies the semantic color styling to the control.RadioColor | undefineddefault