Function useToggle

packages/react-aria/src/toggle/useToggle.ts:77–229

(
  props: AriaToggleProps,
  state: ToggleState,
  ref: RefObject<HTMLInputElement | null>
)

 * Handles interactions for toggle elements, e.g. Checkboxes and Switches.
 */
export function useToggle(
  props: AriaToggleProps,
  state: ToggleState,
  ref: RefObject<HTMLInputElement | null>
): ToggleAria {
  let {
    isDisabled = false,
    isReadOnly = false,
    value,
    name,
    form,
    children,
    isRequired,
    validationBehavior = 'aria',
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledby,
    'aria-describedby': ariaDescribedby,
    onPressStart,
    onPressEnd,
    onPressChange,
    onPress,
    onPressUp,
    onClick
  } = props;

  // Create validation state here because it doesn't make sense to add to general useToggleState.
  let validationState = useFormValidationState({...props, value: state.isSelected});
  let {isInvalid, validationErrors, validationDetails} = validationState.displayValidation;

  useFormValidation(props, validationState, ref);

  let onChange: ChangeEventHandler<HTMLInputElement> = e => {
    // since we spread props on label, onChange will end up there as well as in here.
    // so we have to stop propagation at the lowest level that we care about
    e.stopPropagation();
    state.setSelected(getEventTarget(e).checked);
  };

  let hasChildren = children != null;
  let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
  if (!hasChildren && !hasAriaLabel && process.env.NODE_ENV !== 'production') {
    console.warn(
      'If you do not provide children, you must specify an aria-label for accessibility'
    );
  }

  // Handle press state for keyboard interactions and cases where labelProps is not used.
  let {pressProps, isPressed} = usePress({
    onPressStart,
    onPressEnd,
    onPressChange,
    onPress,
    onPressUp,
    onClick,
    isDisabled
  });

  // Handle press state on the label.