mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-05-18 20:08:19 +00:00
chore: initial Untitled UI Vite scaffold with FontAwesome Pro
This commit is contained in:
31
src/components/base/input/hint-text.tsx
Normal file
31
src/components/base/input/hint-text.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { ReactNode, Ref } from "react";
|
||||
import type { TextProps as AriaTextProps } from "react-aria-components";
|
||||
import { Text as AriaText } from "react-aria-components";
|
||||
import { cx } from "@/utils/cx";
|
||||
|
||||
interface HintTextProps extends AriaTextProps {
|
||||
/** Indicates that the hint text is an error message. */
|
||||
isInvalid?: boolean;
|
||||
ref?: Ref<HTMLElement>;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const HintText = ({ isInvalid, className, ...props }: HintTextProps) => {
|
||||
return (
|
||||
<AriaText
|
||||
{...props}
|
||||
slot={isInvalid ? "errorMessage" : "description"}
|
||||
className={cx(
|
||||
"text-sm text-tertiary",
|
||||
|
||||
// Invalid state
|
||||
isInvalid && "text-error-primary",
|
||||
"group-invalid:text-error-primary",
|
||||
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
HintText.displayName = "HintText";
|
||||
Reference in New Issue
Block a user