uibee 2.10.5 → 2.12.0

package/dist/src/components/inputs/checkbox.d.ts

@@ -1,8 +1,16 @@
-export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+export type CheckboxOption = {
+    label: string;
+    value: string | number;
+};
+export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
     name: string;
     label?: string;
     error?: string;
     info?: string;
+    description?: string;
     className?: string;
+    options: CheckboxOption[];
+    value?: (string | number)[];
+    onChange?: (value: (string | number)[]) => void;
 };
 export default function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/checkbox.js

@@ -1,9 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
-import { SelectionWrapper } from './shared';
+import { SelectionWrapper, FieldWrapper } from './shared';
 export default function Checkbox(props) {
-    const { name, label, error, info, className, ...inputProps } = props;
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: name, name: name, type: 'checkbox', className: `
+    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
+    const selectedValues = Array.isArray(value) ? value : [];
+    return (_jsx(FieldWrapper, { label: label, name: name, required: rest.required, info: info, description: description, error: error, className: className, children: _jsx("div", { className: 'flex flex-col gap-2', children: options.map((option) => (_jsx(CheckboxItem, { name: name, value: option.value, label: option.label, checked: selectedValues.includes(option.value), disabled: rest.disabled, onChange: (e) => {
+                    if (!onChange)
+                        return;
+                    const isChecked = e.target.checked;
+                    let newValues = [...selectedValues];
+                    if (isChecked) {
+                        newValues.push(option.value);
+                    }
+                    else {
+                        newValues = newValues.filter((v) => v !== option.value);
+                    }
+                    onChange(newValues);
+                }, className: 'mb-0' }, option.value))) }) }));
+}
+function CheckboxItem(props) {
+    const { name, label, error, info, description, className, ...inputProps } = props;
+    const id = inputProps.value ? `${name}-${inputProps.value}` : name;
+    return (_jsx(SelectionWrapper, { label: label, name: id, required: inputProps.required, info: info, description: description, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'checkbox', className: `
                         peer appearance-none h-5 w-5 rounded border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50

package/dist/src/components/inputs/input.d.ts

@@ -6,5 +6,6 @@ export type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     className?: string;
     icon?: JSX.Element;
     info?: string;
+    description?: string;
 };
 export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/input.js

@@ -6,7 +6,7 @@ import DateTimePickerPopup from './shared/dateTimePickerPopup';
 import ColorPickerPopup from './shared/colorPickerPopup';
 import useClickOutside from '../../hooks/useClickOutside';
 export default function Input(props) {
-    const { name, label, error, className, icon, info, ...inputProps } = props;
+    const { name, label, error, className, icon, info, description, ...inputProps } = props;
     const { type = 'text', value } = inputProps;
     const localRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
@@ -105,7 +105,7 @@ export default function Input(props) {
             return `${dd}.${MM}.${yyyy} ${hh}:${mm}`;
         return value;
     }
-    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
+    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, description: description, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
                             absolute left-3 text-login-200
                             ${isClickableType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
                         `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: isClickableType ? undefined : name, type: isClickableType ? 'text' : type, value: isDateType ? getDateDisplayValue() : value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `

package/dist/src/components/inputs/radio.d.ts

@@ -1,8 +1,16 @@
-export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+export type RadioOption = {
+    label: string;
+    value: string | number;
+};
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
     name: string;
     label?: string;
     error?: string;
     info?: string;
+    description?: string;
     className?: string;
+    options: RadioOption[];
+    value?: string | number | null;
+    onChange?: (value: string | number) => void;
 };
 export default function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/radio.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SelectionWrapper } from './shared';
+import { SelectionWrapper, FieldWrapper } from './shared';
 export default function Radio(props) {
-    const { name, label, error, info, className, ...inputProps } = props;
+    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props;
+    return (_jsx(FieldWrapper, { label: label, name: name, required: rest.required, info: info, description: description, error: error, className: className, children: _jsx("div", { className: 'flex flex-col gap-2', children: options.map((option) => (_jsx(RadioItem, { name: name, value: option.value, label: option.label, checked: value === option.value, disabled: rest.disabled, onChange: () => {
+                    if (onChange)
+                        onChange(option.value);
+                }, className: 'mb-0' }, option.value))) }) }));
+}
+function RadioItem(props) {
+    const { name, label, error, info, description, className, ...inputProps } = props;
     const { value } = inputProps;
     const id = `${name}-${value}`;
-    return (_jsx(SelectionWrapper, { label: label, name: id, required: inputProps.required, info: info, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'radio', className: `
+    return (_jsx(SelectionWrapper, { label: label, name: id, required: inputProps.required, info: info, description: description, error: error, className: className, disabled: inputProps.disabled, children: _jsxs("div", { className: 'relative flex items-center', children: [_jsx("input", { ...inputProps, id: id, name: name, type: 'radio', className: `
                         peer appearance-none h-5 w-5 rounded-full border border-login-500 bg-login-500/50
                         checked:bg-login checked:border-login
                         focus:outline-none focus:ring-2 focus:ring-login/50

package/dist/src/components/inputs/range.d.ts

@@ -4,6 +4,7 @@ export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     error?: string;
     className?: string;
     info?: string;
+    description?: string;
     showValue?: boolean;
 };
 export default function Range(props: RangeProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/range.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldWrapper } from './shared';
 export default function Range(props) {
-    const { name, label, error, className, info, showValue = true, ...inputProps } = props;
+    const { name, label, error, className, info, description, showValue = true, ...inputProps } = props;
     const { min = 0, max = 100, step = 1, value = 0 } = inputProps;
-    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, children: _jsxs("div", { className: 'flex items-center gap-4', children: [_jsx("input", { ...inputProps, id: name, name: name, type: 'range', min: min, max: max, step: step, value: value, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+    return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, description: description, error: error, className: className, children: _jsxs("div", { className: 'flex items-center gap-4', children: [_jsx("input", { ...inputProps, id: name, name: name, type: 'range', min: min, max: max, step: step, value: value, title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         flex-1 h-2 bg-login-500 rounded-lg appearance-none cursor-pointer
                         accent-login
                         [&::-webkit-slider-thumb]:appearance-none

package/dist/src/components/inputs/select.d.ts

@@ -15,7 +15,8 @@ export type SelectProps = {
     required?: boolean;
     placeholder?: string;
     info?: string;
+    description?: string;
     clearable?: boolean;
     searchable?: boolean;
 };
-export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder, info, clearable, searchable, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder, info, description, clearable, searchable, }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/select.js

@@ -5,7 +5,7 @@ import Image from 'next/image';
 import { useClickOutside } from '../../hooks';
 import { ChevronDown, X, Search } from 'lucide-react';
 import { FieldWrapper } from './shared';
-export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder = 'Select an option', info, clearable = true, searchable = true, }) {
+export default function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder = 'Select an option', info, description, clearable = true, searchable = true, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const [selectedOption, setSelectedOption] = useState(options.find(opt => opt.value === value));
@@ -37,7 +37,7 @@ export default function Select({ label, name, value, onChange, options, error, c
         }
     }
     const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
-    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: [_jsxs("div", { className: 'relative', ref: containerRef, children: [_jsxs("button", { type: 'button', onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen, "aria-labelledby": label ? undefined : name, className: `
+    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, description: description, error: error, className: className, children: [_jsxs("div", { className: 'relative', ref: containerRef, children: [_jsxs("button", { type: 'button', onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": isOpen, "aria-labelledby": label ? undefined : name, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text text-left
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login

package/dist/src/components/inputs/shared/fieldWrapper.d.ts

@@ -5,8 +5,9 @@ interface FieldWrapperProps {
     required?: boolean;
     info?: string;
     error?: string;
+    description?: string;
     children: ReactNode;
     className?: string;
 }
-export default function FieldWrapper({ label, name, required, info, error, children, className, }: FieldWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default function FieldWrapper({ label, name, required, info, error, description, children, className, }: FieldWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/inputs/shared/fieldWrapper.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import InputLabel from './inputLabel';
 import InputInfo from './inputInfo';
 import InputError from './inputError';
-export default function FieldWrapper({ label, name, required, info, error, children, className, }) {
-    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: 'ml-1' })), info && _jsx(InputInfo, { info: info })] })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
+export default function FieldWrapper({ label, name, required, info, error, description, children, className, }) {
+    return (_jsxs("div", { className: `flex flex-col gap-1 w-full relative ${className || ''}`, children: [(label || info) && (_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [label && (_jsx(InputLabel, { label: label, name: name, required: required, className: 'ml-1' })), info && _jsx(InputInfo, { info: info })] })), description && (_jsx("p", { className: 'text-sm text-login-100 ml-1 mb-1', children: description })), children, _jsx(InputError, { error: error, id: `${name}-error` })] }));
 }

package/dist/src/components/inputs/shared/selectionWrapper.d.ts

@@ -5,10 +5,11 @@ interface SelectionWrapperProps {
     required?: boolean;
     info?: string;
     error?: string;
+    description?: string;
     children: ReactNode;
     className?: string;
     disabled?: boolean;
     hideError?: boolean;
 }
-export default function SelectionWrapper({ label, name, required, info, error, children, className, disabled, hideError, }: SelectionWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectionWrapper({ label, name, required, info, error, description, children, className, disabled, hideError, }: SelectionWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/inputs/shared/selectionWrapper.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import InputLabel from './inputLabel';
 import InputInfo from './inputInfo';
 import InputError from './inputError';
-export default function SelectionWrapper({ label, name, required, info, error, children, className, disabled, hideError, }) {
-    return (_jsxs("div", { className: `flex flex-col gap-1 ${className || ''}`, children: [_jsxs("div", { className: 'flex items-center justify-between mb-1', children: [_jsxs("div", { className: 'flex items-center gap-2', children: [children, label && (_jsx(InputLabel, { label: label, name: name, required: required, disabled: disabled, className: 'select-none cursor-pointer' }))] }), info && _jsx(InputInfo, { info: info })] }), !hideError && _jsx(InputError, { error: error })] }));
+export default function SelectionWrapper({ label, name, required, info, error, description, children, className, disabled, hideError, }) {
+    return (_jsxs("div", { className: `flex flex-col gap-1 ${className || ''}`, children: [_jsxs("div", { className: 'flex items-start justify-between mb-1', children: [_jsxs("div", { className: 'flex items-center gap-2', children: [children, label && (_jsx(InputLabel, { label: label, name: name, required: required, disabled: disabled, className: 'select-none cursor-pointer' }))] }), info && _jsx(InputInfo, { info: info })] }), description && (_jsx("p", { className: 'text-xs text-login-200 ml-7 -mt-1 mb-1', children: description })), !hideError && _jsx(InputError, { error: error })] }));
 }

package/dist/src/components/inputs/switch.d.ts

@@ -3,6 +3,7 @@ export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     label?: string;
     error?: string;
     info?: string;
+    description?: string;
     className?: string;
     switchOnly?: boolean;
 };

package/dist/src/components/inputs/switch.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SelectionWrapper } from './shared';
 export default function Switch(props) {
-    const { name, label, error, info, className, switchOnly, ...inputProps } = props;
-    return (_jsx(SelectionWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, hideError: switchOnly, className: className, disabled: inputProps.disabled, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { ...inputProps, type: 'checkbox', id: name, name: name, className: 'sr-only peer' }), _jsx("div", { className: `
+    const { name, label, error, info, description, className, switchOnly, ...inputProps } = props;
+    return (_jsx(SelectionWrapper, { label: label, name: name, required: inputProps.required, info: info, description: description, error: error, hideError: switchOnly, className: className, disabled: inputProps.disabled, children: _jsxs("label", { className: `relative inline-flex items-center cursor-pointer ${switchOnly ? 'h-fit' : 'h-10.5'}`, children: [_jsx("input", { ...inputProps, type: 'checkbox', id: name, name: name, className: 'sr-only peer' }), _jsx("div", { className: `
                     w-11 h-6 bg-login-500/50 rounded-full peer 
                     peer-checked:after:translate-x-full peer-checked:after:border-white 
                     after:content-[''] after:absolute ${switchOnly ? 'after:top-0.5' : 'after:top-2.75'} after:left-0.5 

package/dist/src/components/inputs/tagInput.d.ts

@@ -9,5 +9,6 @@ export type TagInputProps = {
     disabled?: boolean;
     required?: boolean;
     info?: string;
+    description?: string;
 };
-export default function TagInput({ label, name, value, onChange, placeholder, error, className, disabled, required, info, }: TagInputProps): import("react/jsx-runtime").JSX.Element;
+export default function TagInput({ label, name, value, onChange, placeholder, error, className, disabled, required, info, description, }: TagInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/tagInput.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { X } from 'lucide-react';
 import { FieldWrapper } from './shared';
-export default function TagInput({ label, name, value = [], onChange, placeholder = 'Add...', error, className, disabled, required, info, }) {
+export default function TagInput({ label, name, value = [], onChange, placeholder = 'Add...', error, className, disabled, required, info, description, }) {
     const [inputValue, setInputValue] = useState('');
     function handleKeyDown(e) {
         if ((e.key === 'Enter' || e.key === ',') && inputValue.trim()) {
@@ -29,7 +29,7 @@ export default function TagInput({ label, name, value = [], onChange, placeholde
         if (onChange)
             onChange(newValue);
     }
-    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, error: error, className: className, children: [_jsxs("div", { className: `
+    return (_jsxs(FieldWrapper, { label: label, name: name, required: required, info: info, description: description, error: error, className: className, children: [_jsxs("div", { className: `
                     flex flex-wrap gap-2 p-2 rounded-md bg-login-500/50 border border-login-500 
                     text-login-text min-h-10.5
                     focus-within:border-login focus-within:ring-1 focus-within:ring-login

package/dist/src/components/inputs/textarea.d.ts

@@ -4,6 +4,7 @@ export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     error?: string;
     className?: string;
     info?: string;
+    description?: string;
     type?: 'markdown' | 'json' | 'text';
 };
 export default function Textarea(props: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/inputs/textarea.js

@@ -13,12 +13,12 @@ function isValidJson(str) {
     }
 }
 export default function Textarea(props) {
-    const { name, label, error, className, info, type = 'text', rows = 4, ...textareaProps } = props;
+    const { name, label, error, className, info, description, type = 'text', rows = 4, ...textareaProps } = props;
     const { value } = textareaProps;
     const [preview, setPreview] = useState(false);
     const jsonError = type === 'json' && value ? isValidJson(value) : undefined;
     const displayError = jsonError || error;
-    return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, error: displayError, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
+    return (_jsx(FieldWrapper, { label: label, name: name, required: textareaProps.required, info: info, description: description, error: displayError, className: className, children: _jsxs("div", { className: 'relative', children: [type === 'markdown' && (_jsx("div", { className: 'absolute right-2 top-2 z-10 flex gap-2', children: _jsx("button", { type: 'button', onClick: () => setPreview(!preview), className: 'p-1 rounded hover:bg-login-500/50 text-login-text transition-colors', title: preview ? 'Edit' : 'Preview', children: preview ? _jsx(Pencil, { size: 16 }) : _jsx(Eye, { size: 16 }) }) })), type === 'markdown' && preview ? (_jsx("div", { className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text 
                         p-3

package/dist/src/globals.css

@@ -1028,6 +1028,9 @@
   .-mt-0\.5 {
     margin-top: calc(var(--spacing) * -0.5);
   }
+  .-mt-1 {
+    margin-top: calc(var(--spacing) * -1);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -1040,6 +1043,9 @@
   .mr-\[0\.3rem\] {
     margin-right: 0.3rem;
   }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1058,6 +1064,9 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-7 {
+    margin-left: calc(var(--spacing) * 7);
+  }
   .page-container {
     display: grid;
     grid-template-columns: 1fr 1rem minmax(0, 72rem) 1rem 1fr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.10.5",
+  "version": "2.12.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/inputs/checkbox.tsx

@@ -1,23 +1,85 @@
 import { Check } from 'lucide-react'
-import { SelectionWrapper } from './shared'
+import { SelectionWrapper, FieldWrapper } from './shared'
 
-export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+export type CheckboxOption = {
+    label: string
+    value: string | number
+}
+
+type CheckboxItemProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     name: string
     label?: string
     error?: string
     info?: string
+    description?: string
     className?: string
 }
 
+export type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
+    name: string
+    label?: string
+    error?: string
+    info?: string
+    description?: string
+    className?: string
+    options: CheckboxOption[]
+    value?: (string | number)[]
+    onChange?: (value: (string | number)[]) => void
+}
+
 export default function Checkbox(props: CheckboxProps) {
-    const { name, label, error, info, className, ...inputProps } = props
+    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props
+    const selectedValues = Array.isArray(value) ? value : []
 
     return (
-        <SelectionWrapper
+        <FieldWrapper
             label={label}
             name={name}
+            required={rest.required}
+            info={info}
+            description={description}
+            error={error}
+            className={className}
+        >
+            <div className='flex flex-col gap-2'>
+                {options.map((option) => (
+                    <CheckboxItem
+                        key={option.value}
+                        name={name}
+                        value={option.value}
+                        label={option.label}
+                        checked={selectedValues.includes(option.value)}
+                        disabled={rest.disabled}
+                        onChange={(e) => {
+                            if (!onChange) return
+                            const isChecked = e.target.checked
+                            let newValues = [...selectedValues]
+                            if (isChecked) {
+                                newValues.push(option.value)
+                            } else {
+                                newValues = newValues.filter((v) => v !== option.value)
+                            }
+                            onChange(newValues)
+                        }}
+                        className='mb-0'
+                    />
+                ))}
+            </div>
+        </FieldWrapper>
+    )
+}
+
+function CheckboxItem(props: CheckboxItemProps) {
+    const { name, label, error, info, description, className, ...inputProps } = props
+    const id = inputProps.value ? `${name}-${inputProps.value}` : name
+
+    return (
+        <SelectionWrapper
+            label={label}
+            name={id}
             required={inputProps.required}
             info={info}
+            description={description}
             error={error}
             className={className}
             disabled={inputProps.disabled}
@@ -25,7 +87,7 @@ export default function Checkbox(props: CheckboxProps) {
             <div className='relative flex items-center'>
                 <input
                     {...inputProps}
-                    id={name}
+                    id={id}
                     name={name}
                     type='checkbox'
                     className={`

package/src/components/inputs/input.tsx

@@ -12,10 +12,11 @@ export type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     className?: string
     icon?: JSX.Element
     info?: string
+    description?: string
 }
 
 export default function Input(props: InputProps) {
-    const { name, label, error, className, icon, info, ...inputProps } = props
+    const { name, label, error, className, icon, info, description, ...inputProps } = props
     const { type = 'text', value } = inputProps
     const localRef = useRef<HTMLInputElement>(null)
     const [isOpen, setIsOpen] = useState(false)
@@ -130,6 +131,7 @@ export default function Input(props: InputProps) {
             required={inputProps.required}
             info={info}
             error={error}
+            description={description}
             className={className}
         >
             <div className='relative flex items-center' ref={containerRef}>

package/src/components/inputs/radio.tsx

@@ -1,15 +1,66 @@
-import { SelectionWrapper } from './shared'
+import { SelectionWrapper, FieldWrapper } from './shared'
 
-export type RadioProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+export type RadioOption = {
+    label: string
+    value: string | number
+}
+
+type RadioItemProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+    name: string
+    label?: string
+    error?: string
+    info?: string
+    description?: string
+    className?: string
+}
+
+export type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
     name: string
     label?: string
     error?: string
     info?: string
+    description?: string
     className?: string
+    options: RadioOption[]
+    value?: string | number | null
+    onChange?: (value: string | number) => void
 }
 
 export default function Radio(props: RadioProps) {
-    const { name, label, error, info, className, ...inputProps } = props
+    const { options, onChange, value, label, description, error, info, name, className, ...rest } = props
+
+    return (
+        <FieldWrapper
+            label={label}
+            name={name}
+            required={rest.required}
+            info={info}
+            description={description}
+            error={error}
+            className={className}
+        >
+            <div className='flex flex-col gap-2'>
+                {options.map((option) => (
+                    <RadioItem
+                        key={option.value}
+                        name={name}
+                        value={option.value}
+                        label={option.label}
+                        checked={value === option.value}
+                        disabled={rest.disabled}
+                        onChange={() => {
+                            if (onChange) onChange(option.value)
+                        }}
+                        className='mb-0'
+                    />
+                ))}
+            </div>
+        </FieldWrapper>
+    )
+}
+
+function RadioItem(props: RadioItemProps) {
+    const { name, label, error, info, description, className, ...inputProps } = props
     const { value } = inputProps
     const id = `${name}-${value}`
 
@@ -19,6 +70,7 @@ export default function Radio(props: RadioProps) {
             name={id}
             required={inputProps.required}
             info={info}
+            description={description}
             error={error}
             className={className}
             disabled={inputProps.disabled}

package/src/components/inputs/range.tsx

@@ -6,11 +6,12 @@ export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     error?: string
     className?: string
     info?: string
+    description?: string
     showValue?: boolean
 }
 
 export default function Range(props: RangeProps) {
-    const { name, label, error, className, info, showValue = true, ...inputProps } = props
+    const { name, label, error, className, info, description, showValue = true, ...inputProps } = props
     const { min = 0, max = 100, step = 1, value = 0 } = inputProps
 
     return (
@@ -19,6 +20,7 @@ export default function Range(props: RangeProps) {
             name={name}
             required={inputProps.required}
             info={info}
+            description={description}
             error={error}
             className={className}
         >

package/src/components/inputs/select.tsx

@@ -24,6 +24,7 @@ export type SelectProps = {
     required?: boolean
     placeholder?: string
     info?: string
+    description?: string
     clearable?: boolean
     searchable?: boolean
 }
@@ -40,6 +41,7 @@ export default function Select({
     required,
     placeholder = 'Select an option',
     info,
+    description,
     clearable = true,
     searchable = true,
 }: SelectProps) {
@@ -89,6 +91,7 @@ export default function Select({
             name={name}
             required={required}
             info={info}
+            description={description}
             error={error}
             className={className}
         >

package/src/components/inputs/shared/fieldWrapper.tsx

@@ -9,6 +9,7 @@ interface FieldWrapperProps {
     required?: boolean
     info?: string
     error?: string
+    description?: string
     children: ReactNode
     className?: string
 }
@@ -19,6 +20,7 @@ export default function FieldWrapper({
     required,
     info,
     error,
+    description,
     children,
     className,
 }: FieldWrapperProps) {
@@ -37,6 +39,11 @@ export default function FieldWrapper({
                     {info && <InputInfo info={info} />}
                 </div>
             )}
+            {description && (
+                <p className='text-sm text-login-100 ml-1 mb-1'>
+                    {description}
+                </p>
+            )}
             {children}
             <InputError error={error} id={`${name}-error`} />
         </div>

package/src/components/inputs/shared/selectionWrapper.tsx

@@ -9,6 +9,7 @@ interface SelectionWrapperProps {
     required?: boolean
     info?: string
     error?: string
+    description?: string
     children: ReactNode
     className?: string
     disabled?: boolean
@@ -21,6 +22,7 @@ export default function SelectionWrapper({
     required,
     info,
     error,
+    description,
     children,
     className,
     disabled,
@@ -28,7 +30,7 @@ export default function SelectionWrapper({
 }: SelectionWrapperProps) {
     return (
         <div className={`flex flex-col gap-1 ${className || ''}`}>
-            <div className='flex items-center justify-between mb-1'>
+            <div className='flex items-start justify-between mb-1'>
                 <div className='flex items-center gap-2'>
                     {children}
                     {label && (
@@ -43,6 +45,11 @@ export default function SelectionWrapper({
                 </div>
                 {info && <InputInfo info={info} />}
             </div>
+            {description && (
+                <p className='text-xs text-login-200 ml-7 -mt-1 mb-1'>
+                    {description}
+                </p>
+            )}
             {!hideError && <InputError error={error} />}
         </div>
     )

package/src/components/inputs/switch.tsx

@@ -5,12 +5,13 @@ export type SwitchProps = Omit<React.ComponentProps<'input'>, 'name'> & {
     label?: string
     error?: string
     info?: string
+    description?: string
     className?: string
     switchOnly?: boolean
 }
 
 export default function Switch(props: SwitchProps) {
-    const { name, label, error, info, className, switchOnly, ...inputProps } = props
+    const { name, label, error, info, description, className, switchOnly, ...inputProps } = props
 
     return (
         <SelectionWrapper
@@ -18,6 +19,7 @@ export default function Switch(props: SwitchProps) {
             name={name}
             required={inputProps.required}
             info={info}
+            description={description}
             error={error}
             hideError={switchOnly}
             className={className}

package/src/components/inputs/tagInput.tsx

@@ -15,6 +15,7 @@ export type TagInputProps = {
     disabled?: boolean
     required?: boolean
     info?: string
+    description?: string
 }
 
 export default function TagInput({
@@ -28,6 +29,7 @@ export default function TagInput({
     disabled,
     required,
     info,
+    description,
 }: TagInputProps) {
     const [inputValue, setInputValue] = useState('')
 
@@ -58,6 +60,7 @@ export default function TagInput({
             name={name}
             required={required}
             info={info}
+            description={description}
             error={error}
             className={className}
         >

package/src/components/inputs/textarea.tsx

@@ -9,6 +9,7 @@ export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'name'> & {
     error?: string
     className?: string
     info?: string
+    description?: string
     type?: 'markdown' | 'json' | 'text'
 }
 
@@ -22,7 +23,7 @@ function isValidJson(str: string): string | null {
 }
 
 export default function Textarea(props: TextareaProps) {
-    const { name, label, error, className, info, type = 'text', rows = 4, ...textareaProps } = props
+    const { name, label, error, className, info, description, type = 'text', rows = 4, ...textareaProps } = props
     const { value } = textareaProps
     const [preview, setPreview] = useState(false)
 
@@ -35,6 +36,7 @@ export default function Textarea(props: TextareaProps) {
             name={name}
             required={textareaProps.required}
             info={info}
+            description={description}
             error={displayError}
             className={className}
         >