diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
index 7d6eaf6c..0bc5c848 100644
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -5,8 +5,13 @@ import { downcastRef } from '../../util/typing';
import InputRoot from './InputRoot';
type ComponentProps = {
- hasError?: boolean;
type?: 'email' | 'search' | 'text' | 'url';
+ feedback?: 'error' | 'warning';
+
+ /**
+ * @deprecated Use feedback="error" instead
+ */
+ hasError?: boolean;
};
export type InputProps = PresentationalProps &
@@ -18,8 +23,9 @@ export type InputProps = PresentationalProps &
*/
const Input = function Input({
elementRef,
- hasError,
type = 'text',
+ feedback,
+ hasError,
...htmlAttributes
}: InputProps) {
@@ -28,6 +34,7 @@ const Input = function Input({
data-component="Input"
elementRef={downcastRef(elementRef)}
type={type}
+ feedback={feedback}
hasError={hasError}
{...htmlAttributes}
/>
diff --git a/src/components/input/InputRoot.tsx b/src/components/input/InputRoot.tsx
index b0c5c391..c90fb7c8 100644
--- a/src/components/input/InputRoot.tsx
+++ b/src/components/input/InputRoot.tsx
@@ -7,6 +7,11 @@ import { inputGroupStyles } from './InputGroup';
type RootComponentProps = {
element?: 'input' | 'select';
+ feedback?: 'error' | 'warning';
+
+ /**
+ * @deprecated Use feedback="error" instead
+ */
hasError?: boolean;
};
@@ -27,9 +32,14 @@ const InputRoot = function InputRoot({
classes,
elementRef,
hasError,
+ feedback,
...htmlAttributes
}: InputRootProps) {
+ if (feedback === undefined && hasError) {
+ feedback = 'error';
+ }
+
if (!htmlAttributes.id && !htmlAttributes['aria-label']) {
console.warn(
'`Input` component should have either an `id` or an `aria-label` attribute',
@@ -46,7 +56,11 @@ const InputRoot = function InputRoot({
'focus-visible-ring ring-inset border rounded w-full p-2',
'bg-grey-0 focus:bg-white disabled:bg-grey-1',
'placeholder:text-color-grey-5 disabled:placeholder:color-grey-6',
- { 'ring-inset ring-2 ring-red-error': hasError },
+ {
+ 'ring-2': !!feedback,
+ 'ring-red-error': feedback === 'error',
+ 'ring-yellow-notice': feedback === 'warning',
+ },
// Adapt styles when this component is inside an InputGroup
inputGroupStyles,
classes,
diff --git a/src/pattern-library/components/patterns/input/InputPage.tsx b/src/pattern-library/components/patterns/input/InputPage.tsx
index 092747e6..4f2cc4d1 100644
--- a/src/pattern-library/components/patterns/input/InputPage.tsx
+++ b/src/pattern-library/components/patterns/input/InputPage.tsx
@@ -69,11 +69,44 @@ export default function InputPage() {
presentational component props
.
+
+
+
+ Set feedback
to indicate that there is an
+ associated error or warning for the Input
.
+
+
+
+ {`"error"`} | {`"warning"`}
+
+
+
+ {`undefined`}
+
+
+
+
+
+
+
+
+
+
+
+
- Set hasError
to indicate that there is an
- associated error for the Input
.
+
+ Use {`feedback="error"`}
instead.
{`boolean`}