Jelly Radio

A native radio group of paper-weight chips where the chosen chip swells and nudges its neighbours outward.

New

Implementation

1"use client";2 3import {4  useId,5  useState,6  type CSSProperties,7  type HTMLAttributes,8  type ReactNode,9} from "react";10 11export type JellyRadioItem =12  | string13  | {14      value: string;15      label: ReactNode;16      disabled?: boolean;17    };18 19export type JellyRadioProps = Omit<20  HTMLAttributes<HTMLDivElement>,21  "children" | "onChange" | "defaultValue"22> & {23  /** Chips in the radio group. A string is both value and label. */24  items: readonly JellyRadioItem[];25  /** Accessible name for the group. */26  label?: string;27  /** Controlled selected value. */28  value?: string;