@aristobyte-ui/radio

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

📦 Installation

``bash


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

`tsx
import { Radio, RadioGroup } from '@aristobyte-ui/radio';

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

##📂 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

`tsx

Radio Option

``

📊 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