fix: add missing optional props to forms

packages/combobox/docs/Combobox.mdx

@@ -279,6 +279,35 @@ function Example() {
 }
 ```
 
+### Optional prop
+
+Add the optional prop to indicate that the combobox field is not required. 
+
+```jsx example
+function Example() {
+  const [value, setValue] = useState('');
+
+  return (
+    <Combobox
+      label="Choose a fruit"
+      optional
+      value={value}
+      onChange={(val) => setValue(val)}
+      onSelect={(val) => {
+        alert(val);
+        setValue('');
+      }}
+      options={[
+        { value: 'Apple' },
+        { value: 'Banana' },
+        { value: 'Orange' },
+        { value: 'Pineapple' },
+      ]}
+    />
+  );
+}
+```
+
 ## Combobox Props
 
 ```props packages/combobox/src/component.tsx

packages/combobox/src/component.tsx

@@ -60,6 +60,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       onChange,
       onFocus,
       onBlur,
+      optional,
       ...rest
     } = props;
 
@@ -183,6 +184,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       id,
       value: navigationValueOrInputValue,
       label,
+      optional,
       invalid,
       helpText,
       placeholder,

packages/combobox/src/props.ts

@@ -114,6 +114,9 @@ export type ComboboxProps = {
 
   /** For affix use */
   children?: React.ReactNode;
+
+  /** Whether to show optional text */
+  optional?: boolean;
 } & Omit<
   React.PropsWithoutRef<JSX.IntrinsicElements['input']>,
   'onChange' | 'type' | 'value' | 'label'

packages/combobox/stories/Combobox.stories.tsx

@@ -327,3 +327,32 @@ export const AsyncFetch = () => {
     </Combobox>
   );
 };
+
+export const Optional = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <>
+      <p>
+        When the user clicks inside the text box the current value will be
+        selected (like the URL bar in browsers).
+      </p>
+      <Combobox
+        value={value}
+        onChange={(val) => setValue(val)}
+        onSelect={(val) => {
+          setValue(val);
+          action('select')(val);
+        }}
+        label="Stillingstittel"
+        optional
+        options={[
+          { value: 'Product manager' },
+          { value: 'Produktledelse' },
+          { value: 'Prosessoperatør' },
+          { value: 'Prosjekteier' },
+        ]}
+      />
+    </>
+  );
+};

packages/select/docs/Select.mdx

@@ -62,6 +62,18 @@ Select for accessibility. If the field is labeled by a separate element, an
 `aria-labelledby` prop should be provided using the id of the labeling element
 instead.
 
+### Optional
+
+Add the optional prop to indicate that the select is not required. 
+
+```jsx example
+<Select label="Berries" optional>
+  <option value="s">Strawberries</option>
+  <option value="r">Raspberries</option>
+  <option value="c">Cloudberries</option>
+</Select>
+```
+
 ## Hint text
 
 Selects can provide additional context with `hint` if the label and placeholder

packages/select/src/component.tsx

@@ -4,7 +4,7 @@ import { classNames } from '@chbphone55/classnames';
 import type { SelectProps } from './props';
 
 const setup = (props) => {
-  const { className, invalid, id, hint, always, label, style, ...rest } = props;
+  const { className, invalid, id, hint, always, label, style, optional, ...rest } = props;
 
   const helpId = hint ? `${id}__hint` : undefined;
 
@@ -24,6 +24,7 @@ const setup = (props) => {
         'aria-invalid': invalid,
         id,
       },
+      optional,
       help:
         always || invalid
           ? {
@@ -45,11 +46,11 @@ const setup = (props) => {
 function Select(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {
   const id = useId(props.id);
   const { attrs, classes } = setup({ ...props, id });
-  const { div, label, select, help } = attrs;
+  const { div, label, select, help, optional } = attrs;
 
   return (
     <div className={classes} {...div}>
-      {label.children && <label {...label} />}
+      {label.children && <label htmlFor={label.htmlFor}>{label.children}{optional && <span className="pl-8 font-normal text-14 text-gray-500"> (valgfritt)</span>}</label>}
       <div className="input--select__wrap">
         <select ref={ref} {...select} />
       </div>

packages/select/stories/Select.stories.tsx

@@ -61,3 +61,5 @@ export const noLabel = () => (
     </FabricSelect>
   </div>
 );
+
+export const optional = () => <Select optional />;

packages/textarea/docs/TextArea.mdx

@@ -56,6 +56,14 @@ TextArea for accessibility. If the field is labeled by a separate element, an
 `aria-labelledby` prop must be provided using the id of the labeling element
 instead.
 
+### Optional
+
+Add the optional prop to indicate that the textarea is not required. 
+
+```jsx example
+<TextField label="Description" optiona />
+```
+
 ## Help text
 
 TextAreas can provide additional context with `helpText` if the label and

packages/textarea/src/component.tsx

@@ -22,6 +22,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       readOnly,
       style,
       value,
+      optional,
       ...rest
     } = props;
 
@@ -48,7 +49,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         })}
         style={style}
       >
-        {label && <label htmlFor={id}>{label}</label>}
+        {label && <label htmlFor={id}>{label}{optional && <span className="pl-8 font-normal text-14 text-gray-500"> (valgfritt)</span>}</label>}
         <textarea
           {...rest}
           aria-describedby={helpId}

packages/textarea/src/props.ts

@@ -62,6 +62,9 @@ export type TextAreaProps = {
 
   /** The current value (controlled). */
   value?: string;
+
+  /** Whether to show optional text */
+  optional?: boolean;
 } & Omit<
   React.PropsWithoutRef<JSX.IntrinsicElements['textarea']>,
   // omit these, otherwise they seem to form a union type (in the prop table docs)

packages/textarea/stories/TextArea.stories.tsx

@@ -61,3 +61,7 @@ export const minimumRows3 = () => (
 export const maximumRows3 = () => (
   <TextArea label="Description" maximumRows={3} />
 );
+
+export const optional = () => (
+  <TextArea label="Description" optional />
+);

packages/textfield/docs/TextField.mdx

@@ -58,6 +58,17 @@ TextField for accessibility. If the field is labeled by a separate element, an
 `aria-labelledby` prop must be provided using the id of the labeling element
 instead.
 
+### Optional
+
+Add the optional prop to indicate that the textfield is not required. 
+
+```jsx example
+<TextField
+  label="Telefonnummer"
+  optional
+/>
+```
+
 ## Help text
 
 TextFields can provide additional context with `helpText` if the label and

packages/textfield/src/component.tsx

@@ -16,6 +16,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       readOnly,
       type = 'text',
       style,
+      optional,
       ...rest
     } = props;
 
@@ -46,7 +47,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             'input--is-read-only': readOnly,
           })}
         >
-          {label && <label htmlFor={id}>{label}</label>}
+          {label && <label htmlFor={id}>{label}{optional && <span className="pl-8 font-normal text-14 text-gray-500"> (valgfritt)</span>}</label>}
           <div className="relative">
             <input
               {...rest}

packages/textfield/src/props.ts

@@ -77,6 +77,9 @@ export type TextFieldProps = {
 
   /** The current value (controlled). */
   value?: string;
+
+  /** Mark label to indicate that filling in this field is optional */
+  optional?: boolean;
 } & Omit<
   React.PropsWithoutRef<JSX.IntrinsicElements['input']>,
   // omit these, otherwise they seem to form a union type (in the prop table docs)

packages/textfield/stories/Textfield.stories.tsx

@@ -84,3 +84,9 @@ export const invalid = () => (
     <TextField helpText="Error text" invalid />
   </div>
 );
+
+export const optional = () => (
+  <div className="flex flex-col space-y-48">
+    <TextField label="Address" optional />
+  </div>
+);