feat: form components required prop

src/components/Checkbox.tsx

@@ -5,6 +5,7 @@ import { disabledBg, disabledCursor } from "./utils/classes.ts";
 
 type CheckboxProps = {
   isDisabled?: boolean;
+  isRequired?: boolean;
   isSelected: boolean;
   setIsSelected?: Dispatch<SetStateAction<boolean>>;
   label?: string;
@@ -12,12 +13,14 @@ type CheckboxProps = {
 
 const Checkbox = ({
   isDisabled = false,
+  isRequired = false,
   isSelected,
   setIsSelected,
   label,
 }: CheckboxProps) => {
   return (
     <NextCheckbox
+      isRequired={isRequired}
       isDisabled={isDisabled}
       isSelected={isSelected}
       onValueChange={setIsSelected}

src/components/DateInput.tsx

@@ -8,6 +8,7 @@ import Typography from "./Typography.tsx";
 import { textColor } from "./utils/colors.ts";
 
 type DateInputProps = {
+  isRequired?: boolean;
   label: string;
   value?: Date;
   onValueChange: Dispatch<SetStateAction<Date | undefined>>;
@@ -16,6 +17,7 @@ type DateInputProps = {
 };
 
 const DateInput = ({
+  isRequired = false,
   label,
   value,
   onValueChange,
@@ -25,13 +27,14 @@ const DateInput = ({
   const dateFormat = "dd/MM/yyyy";
 
   type inputProps = {
+    isRequired: boolean;
     value?: string;
     onClick?: () => void;
   };
 
   const CustomInput = forwardRef(
     (
-      { value, onClick }: inputProps,
+      { isRequired, value, onClick }: inputProps,
       // @ts-expect-error the "ref" prop is needed to avoid console errors.
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       ref
@@ -39,6 +42,7 @@ const DateInput = ({
       return (
         <div onClick={onClick}>
           <BaseInput
+            isRequired={isRequired}
             label={label}
             endContent={
               <Icon
@@ -91,7 +95,7 @@ const DateInput = ({
       selected={value}
       onSelect={(date) => onValueChange(date)}
       onChange={(date) => !!date && onValueChange(date)}
-      customInput={<CustomInput />}
+      customInput={<CustomInput isRequired={isRequired} />}
       showPopperArrow={false}
       calendarStartDay={1}
       formatWeekDay={(day) => <div>{day.charAt(0)}</div>}

src/components/Dropdown.tsx

@@ -4,6 +4,7 @@ import { baseInputClassNames } from "./utils/baseComponents.tsx";
 import Icon from "./Icon.tsx";
 
 type DropdownProps = {
+  isRequired?: boolean;
   label?: string;
   valueOptions: { value: string; label: string }[];
   value?: string;
@@ -11,6 +12,7 @@ type DropdownProps = {
 };
 
 const Dropdown = ({
+  isRequired = false,
   label,
   valueOptions,
   value,
@@ -18,6 +20,7 @@ const Dropdown = ({
 }: DropdownProps) => {
   return (
     <Autocomplete
+      isRequired={isRequired}
       label={label}
       selectedKey={value}
       onSelectionChange={(key) => onValueChange(key as string)}
@@ -28,6 +31,7 @@ const Dropdown = ({
       inputProps={{
         classNames: baseInputClassNames(false),
         variant: "bordered",
+        isRequired: isRequired,
       }} // use the same props as BaseInput
       selectorIcon={<Icon name="dropdown" />}
       isClearable={false} // so the "cross" button does not show

src/components/Radio.tsx

@@ -3,15 +3,27 @@ import { Dispatch, SetStateAction } from "react";
 import { disabledBg, disabledCursor } from "./utils/classes.ts";
 
 type RadioProps = {
+  isRequired?: boolean;
   label?: string;
   valueOptions: { value: string; label: string; isDisabled?: boolean }[];
   value?: string;
   onValueChange?: Dispatch<SetStateAction<string | undefined>>;
 };
 
-const Radio = ({ label, valueOptions, value, onValueChange }: RadioProps) => {
+const Radio = ({
+  isRequired = false,
+  label,
+  valueOptions,
+  value,
+  onValueChange,
+}: RadioProps) => {
   return (
-    <RadioGroup label={label} value={value} onValueChange={onValueChange}>
+    <RadioGroup
+      isRequired={isRequired}
+      label={label}
+      value={value}
+      onValueChange={onValueChange}
+    >
       {valueOptions.map((option) => (
         <NextRadio
           isDisabled={option.isDisabled || false}

src/components/TextInput.tsx

@@ -2,6 +2,7 @@ import { Dispatch, ReactNode, SetStateAction } from "react";
 import { BaseInput } from "./utils/baseComponents.tsx";
 
 type TextInputProps = {
+  isRequired?: boolean;
   label?: string;
   endContent?: ReactNode; // such as units (as text element e.g. <span>)
   isClearable?: boolean;
@@ -13,6 +14,7 @@ type TextInputProps = {
 };
 
 const TextInput = ({
+  isRequired = false,
   label = "",
   endContent,
   isClearable = false,
@@ -24,6 +26,7 @@ const TextInput = ({
 }: TextInputProps) => {
   return (
     <BaseInput
+      isRequired={isRequired}
       label={label}
       endContent={endContent}
       placeholder=" "

src/components/Toggle.tsx

@@ -13,6 +13,7 @@ const Toggle = ({ isSelected, setIsSelected, label }: ToggleProps) => {
     : "ml-[11px] bg-grey";
   return (
     <Switch
+      // Does not support "isRequired": https://github.com/nextui-org/nextui/issues/1610
       isSelected={isSelected}
       onValueChange={setIsSelected}
       color="default"

src/components/utils/baseComponents.tsx

@@ -15,7 +15,8 @@ type BaseInputProps = {
   isInvalid: boolean;
   errorMessage: string;
   // interaction
-  isDisabled: boolean;
+  isRequired?: boolean;
+  isDisabled?: boolean;
 };
 
 type baseInputClassNamesObj = { [key in InputSlots]: string };
@@ -59,7 +60,8 @@ export const BaseInput = ({
   onValueChange,
   isInvalid,
   errorMessage,
-  isDisabled,
+  isRequired = false,
+  isDisabled = false,
 }: BaseInputProps) => {
   return (
     <Input
@@ -72,6 +74,7 @@ export const BaseInput = ({
       onValueChange={onValueChange}
       isInvalid={isInvalid}
       errorMessage={errorMessage}
+      isRequired={isRequired}
       isDisabled={isDisabled}
       // appearance
       labelPlacement="outside"