diff --git a/apps/storybook/stories/text-input.stories.tsx b/apps/storybook/stories/text-input.stories.tsx
index 03bd842a..bb5a9220 100644
--- a/apps/storybook/stories/text-input.stories.tsx
+++ b/apps/storybook/stories/text-input.stories.tsx
@@ -30,6 +30,9 @@ export default {
placeholder: {
control: 'text',
},
+ required: {
+ control: 'boolean',
+ },
type: {
control: 'text',
},
@@ -111,6 +114,17 @@ export function Disabled() {
);
}
+export function Required() {
+ return (
+
+ );
+}
+
export function Error() {
const [value, setValue] = useState('1234');
diff --git a/packages/ui/src/TextInput/TextInput.tsx b/packages/ui/src/TextInput/TextInput.tsx
index ebb08328..192f2737 100644
--- a/packages/ui/src/TextInput/TextInput.tsx
+++ b/packages/ui/src/TextInput/TextInput.tsx
@@ -56,6 +56,7 @@ function TextInput(
id: idParam,
isLabelHidden = false,
label,
+ required,
startIcon: StartIcon,
type = 'text',
value,
@@ -80,6 +81,7 @@ function TextInput(
)}
htmlFor={id}>
{label}
+ {required && *}
{StartIcon && (
@@ -101,6 +103,7 @@ function TextInput(
defaultValue={defaultValue}
disabled={disabled}
id={id}
+ required={required}
type={type}
value={value != null ? value : undefined}
onChange={(event) => {