Function ColorField

starters/hooks/src/ColorField.tsx:14–38

(props: ColorFieldProps)

}

export function ColorField(props: ColorFieldProps) {
  let state = useColorFieldState(props);
  let inputRef = useRef<HTMLInputElement>(null);
  /*- begin highlight -*/
  let {labelProps, inputProps} = useColorField(props, state, inputRef);
  /*- end highlight -*/
  let [isFocused, setFocused] = useState(false);
  let {focusProps} = useFocus({onFocusChange: setFocused});

  return (
    <div className="react-aria-ColorField">
      {props.label && (
        <label className="react-aria-Label" {...labelProps}>
          {props.label}
        </label>
      )}
      <input
        {...mergeProps(inputProps, focusProps)}
        ref={inputRef}
        className="react-aria-Input inset"
        data-focused={isFocused || undefined}
      />
    </div>
  );
}