Radio group

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

RadioGroup API

A RadioGroup component presents a set of options where only one option can be selected.

interface RadioGroupProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * The default selected Radio item in this group.
   *
   * This should be the `value` prop of one of the Radio items inside this group.
   */
  defaultValue?: string | number | readonly string[];

  /**
   * Disable all Radio items in this group.
   */
  disabled?: boolean;

  /**
   * How the radio items are laid out in the group.
   * @default vertical
   */
  layout?: "horizontal" | "vertical" | "horizontal-stacked";

  /**
   * The name of this radio group. This name is applied to all Radio items inside this group.
   *
   * If no name is provided, one will be generated so that all of the Radio items have the same name.
   */
  name?: string;

  /**
   * Callback when the selected Radio item changes.
   */
  onChange?: ((ev: FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void);

  ref?: Ref<HTMLDivElement>;

  /**
   * Require a selection in this group. Adds the `required` prop to all child Radio items.
   */
  required?: boolean;

  style?: CSSProperties;

  /**
   * The selected Radio item in this group.
   *
   * This should be the `value` prop of one of the Radio items inside this group.
   */
  value?: string;
}

Radio API

Radio component is a wrapper for a radio button with a label.

interface RadioProps {
  as?: "input";

  children?: undefined;

  className?: string;

  /**
   * Disable this Radio item.
   */
  disabled?: boolean;

  /**
   * A circle outline, with a filled circle icon inside when the Radio is checked.
   */
  indicator?: NonNullable<WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null> | undefined;

  /**
   * Hidden input that handles the radio's functionality.
   *
   * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,
   * except `className` and `style`, which remain on the root slot.
   */
  input?: ({ as?: "input"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, "children"> & { children?: undefined; }) | undefined;

  /**
   * The Radio's label.
   */
  label?: WithSlotShorthandValue<Omit<ComponentProps<LabelSlots>, "required"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, "children"> & { children?: any; }> | null | undefined; size?: "small" | "medium" | "large" | undefined; weight?: "regular" | "semibold" | undefined; } & RefAttributes<HTMLLabelElement>> | null | undefined;

  /**
   * The position of the label relative to the radio indicator.
   *
   * This defaults to `after` unless the Radio is inside a RadioGroup with `layout="horizontalStacked"`,
   * in which case it defaults to `below`.
   */
  labelPosition?: "below" | "after";

  /**
   * Callback when this Radio is selected in its group.
   *
   * **Note:** `onChange` is NOT called when this Radio is deselected.
   * Use RadioGroup's `onChange` event to determine when the selection in the group changes.
   */
  onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void);

  ref?: Ref<HTMLInputElement>;

  /**
   * The root element of the Radio.
   *
   * The root slot receives the `className` and `style` specified directly on the `<Radio>`.
   * All other native props will be applied to the primary slot: `input`
   */
  root?: NonNullable<WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null> | undefined;

  style?: CSSProperties;

  /**
   * The value of the RadioGroup when this Radio item is selected.
   */
  value?: string | number | readonly string[];
}