Function Switch

starters/hooks/src/Switch.tsx:11–48

(props: AriaSwitchProps)

import './Switch.css';

export function Switch(props: AriaSwitchProps) {
  let state = useToggleState(props);
  let ref = useRef<HTMLInputElement>(null);
  /*- begin highlight -*/
  let {labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly, isInvalid} =
    useSwitch(props, state, ref);
  /*- end highlight -*/
  let {hoverProps, isHovered} = useHover({isDisabled: isDisabled || isReadOnly});
  let {isFocused, isFocusVisible, focusProps} = useFocusRing();

  return (
    <div className="react-aria-SwitchField" data-disabled={isDisabled || undefined}>
      {/* The label wraps a visually hidden native input plus the styled track/handle. */}
      <label
        {...mergeProps(labelProps, hoverProps)}
        className="react-aria-SwitchButton"
        data-selected={isSelected || undefined}
        data-pressed={isPressed || undefined}
        data-hovered={isHovered || undefined}
        data-focused={isFocused || undefined}
        data-focus-visible={isFocusVisible || undefined}
        data-disabled={isDisabled || undefined}
        data-readonly={isReadOnly || undefined}
        data-invalid={isInvalid || undefined}>
        <VisuallyHidden elementType="span">
          <input {...mergeProps(inputProps, focusProps)} ref={ref} />
        </VisuallyHidden>
        <div className="track indicator">
          <div
            data-disabled={isDisabled || undefined}
            className={isSelected ? 'handle' : 'handle indicator'}
          />
        </div>
        {props.children}
      </label>
    </div>
  );
}