diff --git a/apps/storybook/stories/select.stories.tsx b/apps/storybook/stories/select.stories.tsx
index e7b02537..145936ed 100644
--- a/apps/storybook/stories/select.stories.tsx
+++ b/apps/storybook/stories/select.stories.tsx
@@ -176,3 +176,28 @@ export function Disabled() {
);
}
+
+export function Uncontrolled() {
+ return (
+
+
+
+ );
+}
diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx
index fe1fd708..294ae34d 100644
--- a/packages/ui/src/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@@ -16,18 +16,20 @@ export type SelectItem = Readonly<{
export type SelectDisplay = 'block' | 'inline';
type Props = Readonly<{
+ defaultValue?: T;
display?: SelectDisplay;
isLabelHidden?: boolean;
label: string;
name?: string;
- onChange: (value: string) => void;
+ onChange?: (value: string) => void;
options: ReadonlyArray>;
- value: T;
+ value?: T;
}> &
Readonly;
function Select(
{
+ defaultValue,
display,
disabled,
label,
@@ -59,11 +61,12 @@ function Select(
'focus:border-primary-500 focus:ring-primary-500 rounded-md border-slate-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm',
disabled && 'bg-slate-100',
)}
+ defaultValue={defaultValue != null ? String(defaultValue) : undefined}
disabled={disabled}
id={id}
- value={String(value)}
+ value={value != null ? String(value) : undefined}
onChange={(event) => {
- onChange(event.target.value);
+ onChange?.(event.target.value);
}}
{...props}>
{options.map(({ label: optionLabel, value: optionValue }) => (