feat: added example for optional field label

abusix · Jun 7, 2024 · ae82a7c · ae82a7c
1 parent 826ef9a
commit ae82a7c
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/components/form-field/text-input/text-input.stories.tsx b/src/components/form-field/text-input/text-input.stories.tsx
@@ -19,21 +19,27 @@ const TextInputWithHooks = ({
     hasLeftIcon = false,
     readOnly = false,
     value,
+    optional,
 }: {
     error?: boolean;
     disabled?: boolean;
     hasLeftIcon?: boolean;
     readOnly?: boolean;
     value?: string;
+    optional?: boolean;
 }) => {
     const [inputValue, setInputValue] = useState(value);
 
     return (
         <FormField>
             <FormField.LabelGroup>
-                <FormField.Label htmlFor="value">Label</FormField.Label>
+                <FormField.Label htmlFor="value" optional={optional}>
+                    Label
+                </FormField.Label>
+
                 <FormField.Description id="value-description">Description</FormField.Description>
             </FormField.LabelGroup>
+
             <FormField.TextInput
                 id="value"
                 value={inputValue}
@@ -44,6 +50,7 @@ const TextInputWithHooks = ({
                 LeftIcon={hasLeftIcon ? SearchIcon : undefined}
                 readOnly={readOnly}
             />
+
             {error ? <FormField.ErrorMessage>Error message.</FormField.ErrorMessage> : null}
         </FormField>
     );
@@ -88,3 +95,11 @@ export const Disabled: Story = {
         </div>
     ),
 };
+
+export const Optional: Story = {
+    render: () => (
+        <div className="w-72">
+            <TextInputWithHooks optional />
+        </div>
+    ),
+};