Function RadioGroup

starters/hooks/src/RadioGroup.tsx:23–45

({children, ...props}: RadioGroupProps)

let RadioContext = React.createContext<RadioGroupState | null>(null);

export function RadioGroup({children, ...props}: RadioGroupProps) {
  let state = useRadioGroupState(props);
  let {radioGroupProps, labelProps} = useRadioGroup(props, state);

  return (
    <div
      {...radioGroupProps}
      className="react-aria-RadioGroup"
      data-orientation={props.orientation || 'vertical'}
      data-invalid={state.isInvalid || undefined}
      data-disabled={state.isDisabled || undefined}
      data-readonly={state.isReadOnly || undefined}>
      {props.label && (
        <span {...labelProps} className="react-aria-Label">
          {props.label}
        </span>
      )}
      <div className="radio-items">
        <RadioContext.Provider value={state}>{children}</RadioContext.Provider>
      </div>
    </div>
  );
}

export function Radio(props: AriaRadioProps) {
  let state = React.useContext(RadioContext)!;