@aristobyte-ui/radio

@aristobyte-ui/radio

Fully-typed, composable Radio and RadioGroup components for AristoByteUI, supporting multiple variants, sizes, appearances, alignments, and optional label highlights.

📦 Installation

# Install via Yarn
yarn add -D @aristobyte-ui/radio

# Or via npm
npm install -D @aristobyte-ui/radio

# Or via pnpm
pnpm add -D @aristobyte-ui/radio

🛠 Usage

import { Radio, RadioGroup } from "@aristobyte-ui/radio";

<RadioGroup
  name="options"
  value="option1"
  onChange={(val) => console.log(val)}
  variant="primary"
  size="md"
  align="horizontal"
  alignLabel="right"
>
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
</RadioGroup>;

##📂 Presets Available

• variant: default | primary | secondary | success | error | warning
• appearance: default | solid | outline | outline-dashed | no-outline | glowing
• size: xsm | sm | md | lg | xlg
• align: horizontal | vertical
• alignLabel: top | right | bottom | left
• highlightLabel: boolean

🔧 Example in a Package

<Radio
  value="radio1"
  size="lg"
  variant="success"
  appearance="glowing"
  alignLabel="top"
>
  Radio Option
</Radio>

📊 Why This Matters

• Performance-first: Lightweight CSS ensures fast rendering and smooth transitions.
• Fully typed: TypeScript-first API ensures predictable usage and IDE autocomplete.
• AristoByteUI ready: Seamlessly integrates with design tokens and SCSS modules.
• Flexible: Supports multiple variants, sizes, appearances, alignments, and optional label highlights.

🏆 Philosophy

• Modular architecture: Radio and RadioGroup components are fully composable.
• Declarative styling: SCSS modules keep styles maintainable and scoped.
• Strict typing & runtime flexibility: Props fully typed while allowing runtime overrides.
• Developer experience optimized: Easy to use with predictable behavior and minimal boilerplate.

📜 License

MIT © AristoByte

🛡 Shields Showcase