{
@@ -17,12 +17,21 @@ const INPUT_BASE = 'brutal-border bg-white px-4 py-3 text-carbon-black focus:out
/**
* Text input with optional label and error state.
*/
-export function Input({ label, error, className, ...props }: InputProps) {
+export function Input({ label, error, className, id, ...props }: InputProps) {
+ const generatedId = useId()
+ const inputId = id ?? generatedId
+ const errorId = `${inputId}-error`
+
return (
- {label && }
-
- {error && {error}}
+ {label && }
+
+ {error && {error}}
)
}
@@ -46,12 +55,22 @@ interface TextareaProps extends TextareaHTMLAttributes {
/**
* Multiline textarea with optional label and error state.
*/
-export function Textarea({ label, error, rows = 4, className, ...props }: TextareaProps) {
+export function Textarea({ label, error, rows = 4, className, id, ...props }: TextareaProps) {
+ const generatedId = useId()
+ const textareaId = id ?? generatedId
+ const errorId = `${textareaId}-error`
+
return (
- {label && }
-
- {error && {error}}
+ {label && }
+
+ {error && {error}}
)
}