Function ColorChannelField

packages/react-aria-components/src/ColorField.tsx:148–192

(props: ColorChannelFieldProps)

}

function ColorChannelField(props: ColorChannelFieldProps) {
  let {locale} = useLocale();
  let state = useColorChannelFieldState({
    ...props,
    locale
  });

  let inputRef = useRef<HTMLInputElement>(null);
  let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
  let {labelProps, inputProps, descriptionProps, errorMessageProps, ...validation} =
    useColorChannelField(
      {
        ...removeDataAttributes(props),
        label,
        validationBehavior: props.validationBehavior ?? 'native'
      },
      state,
      inputRef
    );

  return (
    <>
      {useChildren(
        props,
        state,
        props.forwardedRef,
        inputProps,
        inputRef,
        labelProps,
        labelRef,
        descriptionProps,
        errorMessageProps,
        validation
      )}
      {props.name && (
        <input
          type="hidden"
          name={props.name}
          form={props.form}
          value={isNaN(state.numberValue) ? '' : state.numberValue}
        />
      )}
    </>
  );
}

interface HexColorFieldProps extends ColorFieldProps {
  forwardedRef: ForwardedRef<HTMLDivElement>;