Input

The Input component based on the Button.

Props

Props of the Button | Paper | Color component are also available.

Name	Type	Default	Description
value	string, boolean		Value set to InputComponent
disabled	bool	false	If true, the component is disabled.
validation	function		After a change, this function can be used to check whether the value is correct. The inputs are `(value, changedEver)`, the return need to be this `{error:false, errorMessage:''}`
ContainerComponent	node	'div'	Passes these property to root component
ContainerProps	object		Passing props to the `ContainerComponent`
label	string		The label is above the input
LabelComponent	element type	Typography	The component used for error message node. Either a string to use a HTML element or a component.
LabelProps	object		Passing props to the `LabelComponent`
error	bool	false	If true, the value show will invalid from the start
helperText	string		The additional text is above the input
HelperTextComponent	element type	Typography	The component used for error message node. Either a string to use a HTML element or a component.
HelperTextProps	object		Passing props to the `HelperTextComponent`
errorMessage	string		The error message of initial error
ErrorMessageComponent	element type	Paper	The component used for error message container node. Either a string to use a HTML element or a component.
ErrorMessageProps	object		Passing props to the `ErrorMessageComponent`
ErrorMessageTypographyComponent	element type	Typography	The component used for error message node. Either a string to use a HTML element or a component.
ErrorMessageTypographyProps	object		Passing props to the `ErrorMessageTypographyComponent`
InputComponent	element type	TextBase	The component used for input node. Either a string to use a HTML element or a component.
InputProps	object		Passing props to the `InputComponent`
disableButtonPaper	bool	false	If true, the Button paper won't show

The ref is forwarded to the root ContainerComponent element.

Text

Just a wrapper that sets InputComponent to TextBase, but since this is the default setting in Input, this Wrapper was created just to adapt to the convention of creating other types of input fields.

TextBase

The text type input base component.

Props

Name	Type	Default	Description
value	string		Value set to input node
disabled	bool	false	If true, the component is disabled.
onChange	function		Fires when a change occurs. Its inputs `(event, value)`
onBlur	function		Fires when focus is lost. Its inputs `(event, value)`
PaperComponent	element type	Paper	The component used for root node. Either a string to use a HTML element or a component.
PaperProps	object		Passing props to the `PaperComponent`
InputComponent	element type	'input'	The component used for input node. Either a string to use a HTML element or a component.
effect	function		This function will be called back - when the component mounted - with an `{actions}` input that contains `actions.setValue(value)` and `actions.getValue()`
minRows	number	4	If the `InputComponent` is `textarea`, this sets the minimum height of the area
maxRows	number	minRows	If the `InputComponent` is `textarea`, this sets the maximum height of the area

The ref is forwarded to the input node.

Select

A wrapper that sets InputComponent to SelectBase.

SelectBase

The select component.

Props

Name	Type	Default	Description
value	array		Initial selected values
menu	array		These are the options that MenuComponent will show. Its items have to label and value property `{label:'Label', value:1}`
multiple	bool	false	If true, multiple selection will be enabled
disabled	bool	false	If true, the component is disabled.
placeholder	string		If the value array is empty, it shows this text
onChange	function		Fires when a change occurs. Its inputs `(event, value)`
onBlur	function		Fires when focus is lost. Its inputs `(event, value)`
PaperComponent	element type	Paper	The component used for root node. Either a string to use a HTML element or a component.
PaperProps	object		Passing props to the `PaperComponent`
MenuComponent	element type	Menu	The component used for menu node. Either a string to use a HTML element or a component.
MenuProps	object		Passing props to the `MenuComponent`
endIcon	node		Replace default end icon
OpenedStateIcon	element type		Use the default close icon component, but change the child in the opened state
ClosedStateIcon	element type		Use the default close icon component, but change the child in the closed state
checkbox	bool	false	If true, checkboxes are show up.
checkboxIconToEnd	bool	false	If true, the checkbox icon set to `endIcon`
getCheckboxIconButtonProps	function		This function can be used to set the props of Button component of the checkbox icon. Its inputs `({defaultButtonProps, active, disabled, size, variant, color})`
effect	function		This function will be called back - when the component mounted - with an `{actions}` input that contains `actions.setValue(value)` and `actions.getValue()`

The ref is forwarded to the root PaperComponent node.

Checkbox

A wrapper that sets InputComponent to CheckboxBase.

CheckboxBase

The checkbox component.

Props

Props of the MenuBase component are also available.

Name	Type	Default	Description
value	array		Initial selected values
menu	array		These are the options that MenuComponent will show. Its items have to label and value property `{label:'Label', value:1}`
multiple	bool	false	If true, multiple selection will be enabled
disabled	bool	false	If true, the component is disabled.
onChange	function		Fires when a change occurs. Its inputs `(event, value)`
onBlur	function		This only exists here because of the common convention of other input components, if this is declare then onChange will not fire. Its inputs `(event, value)`
Component	element type	MenuBase	The component used for root menu node. Either a string to use a HTML element or a component.
checkboxIconToEnd	bool	false	If true, the checkbox icon set to `endIcon`
getCheckboxIconButtonProps	function		This function can be used to set the props of Button component of the checkbox icon. Its inputs `({defaultButtonProps, active, disabled, size, variant, color})`
effect	function		This function will be called back - when the component mounted - with an `{actions}` input that contains `actions.setValue(value)` and `actions.getValue()`

The ref is forwarded to the root Component node.

Switch

A wrapper that sets InputComponent to CheckboxBase.

SwitchBase

The switch component.

Props

Props of the MenuBase component are also available.

Name	Type	Default	Description
value	array		Initial selected values
menu	array		These are the options that MenuComponent will show. Its items have to label and value property `{label:'Label', value:1}`
multiple	bool	false	If true, multiple selection will be enabled
disabled	bool	false	If true, the component is disabled.
onChange	function		Fires when a change occurs. Its inputs `(event, value)`
onBlur	function		This only exists here because of the common convention of other input components, if this is declare then onChange will not fire. Its inputs `(event, value)`
Component	element type	MenuBase	The component used for root menu node. Either a string to use a HTML element or a component.
switchIconToEnd	bool	false	If true, the checkbox icon set to `endIcon`
getSwitchIconButtonProps	function		This function can be used to set the props of Button component of the switch icon. Its inputs `({defaultButtonProps, active, disabled, size, variant, color})`
getSwitchIconParentButtonProps	function		This function can be used to set the props of parent Button component of the switch icon. Its inputs `({defaultButtonProps, active, disabled, size, variant, color})`
effect	function		This function will be called back - when the component mounted - with an `{actions}` input that contains `actions.setValue(value)` and `actions.getValue()`

The ref is forwarded to the root Component node.

Examples for Text

Contained

Add 'Error' text to show error message

Outlined

Add 'Error' text to show error message

Text

Add 'Error' text to show error message

Validation example

function isValidForText(value) {
    const isError = (value === 'Error')
    return {error: isError, errorMessage: isError ? 'Error message' : ''}
}

Disabled

Contained

Additional text

Outlined

Additional text

Text

Additional text

Example for sizes

Small

Additional text

Default

Additional text

Large

Additional text

Example with startIcon and endIcon

const buttonProps = {
    onClick: function (e, props) {
        e.preventDefault();
        alert('click: '+ JSON.stringify(props))
    },
    href: '/Input'
}

Start icon

Additional text

End icon

Additional text

Both

Additional text

Textarea

function HelperTextComponentForTextArea({children, value, effect, changedEver, getFocus, validation, ...props}) {

    const [_value, setValue] = useState(value)

    useEffect(()=>{
        if (effect) {
            effect({actions: {
                    setValue,
                }
            })
        }
        return ()=>{
            if (effect) {
                effect({actions: {
                        setValue: async ()=>{}
                    }
                })
            }
        }
    })

    const isError = validation(_value, changedEver.current).error;

    return (
        <Color
            {...changedEver.current ? {color: isError ? 'error' : undefined} : {}}
        >
            <Typography
                {...props}
            >
                {!changedEver.current ? children : 'Count of characters: '+ ((_value?.length || 0).toString())}
            </Typography>
        </Color>
    )
}

function lengthTextarea(value, changedEver) {
    const isError = (changedEver && !value?.length || changedEver && value?.length && value.length < 150 || changedEver && value?.length && value.length > 1500);
    return {error: isError, errorMessage: isError ? 'Must be between 150 and 1500 characters long' : ''}
}

Contained

Enter a text of at least 150 characters

Examples for Select

Contained

Select 'Error' option to show error message

Select one

Outlined

Selected option initially

Option 1

Text

Multiple select

Validation example

function isValidForSelect(value) {
    const isError = (typeof value === 'object' && value.indexOf('Error') !== -1)
    return {error: isError, errorMessage: isError ? 'Error message' : ''}
}

Disabled

Contained

Select 'Error' option to show error message

Select one

Outlined

Selected option initially

Option 1

Text

Multiple select

Sizes

Small

Select 'Error' option to show error message

Select one

Default

Select 'Error' option to show error message

Select one

Large

Select 'Error' option to show error message

Multiple select

Example with startIcon and endIcon

const buttonProps = {
    onClick: function (e, props) {
        e.preventDefault();
        alert('click: '+ JSON.stringify(props))
    },
    href: '/Input'
}

Start icon

Select 'Error' option to show error message

Select one

End icon

Select 'Error' option to show error message

Select one

Both

Select 'Error' option to show error message

Select one

Enabled checkbox

function primaryCircle({active, disabled, color}) {
    return {
        color: disabled ? 'disabled' : active ? 'primary' : color,
        circle: true,
    }
}

Multiple options

Select 'Error' option to show error message

Select one

Multiple options

Select 'Error' option to show error message

Multiple select

Examples for Checkbox

Validation example for checkboxes

function selectOne(value, changedEver) {
    const isError = (changedEver && !value.length);
    return {error: isError, errorMessage: isError ? 'Select one' : ''}
}

Variants

Contained

Additional text

Option 1

Outlined

Additional text

Option 1

Text

Additional text

Option 1

Disabled

Contained

Additional text

Option 1

Outlined

Additional text

Option 1

Text

Additional text

Option 1

Sizes

Small

Additional text

Option 1

Default

Additional text

Option 1

Large

Additional text

Option 1

Multiple options

Additional text

Option 1

Option 2

Option 3

Multiple options, multiple select

Multiple options

You can choose more than one

Option 1

Option 2

Option 3

Selected initially

Selected initally

Additional text

Option 1

Option 2

Option 3

Selected initally

Additional text

Option 1

Custom style for checkbox icon: primary color

function primaryCheckbox({active, disabled, color}) {
    return {color: disabled ? 'disabled' : active ? 'primary' : color}
}

Multiple options

You can choose more than one

Option 1

Option 2

Option 3

Custom style for checkbox icon: radio

function radioButtons({active}) {
    return {
        circle: true,
        icon: active ?
            <SvgIcon>
                <circle cx="12" cy="12" r="11" fill={"currentColor"}/>
            </SvgIcon>
            : <SvgIcon />,
    }
}

Multiple options

Select one

Option 1

Option 2

Option 3

Checkbox icon to end

function primaryCircle({active, disabled, color}) {
    return {
        color: disabled ? 'disabled' : active ? 'primary' : color,
        circle: true,
    }
}

Multiple options

You can choose more than one

Option 1

Option 2

Option 3

Custom checkbox icon with button EndIconContainerComponent property

function CustomCheckbox({children, active, disabled, color, size, variant, ...props}) {

    const defaultButtonProps = {
        Component: 'div',
        size: 'checkbox-'+(size.split('-')[1]),
        variant: 'contained',
        icon: active ? <DoneIcon /> : <SvgIcon />,
        color: disabled ? 'disabled' : active ? 'primary' : color,
        circle: true,
        active,
        style: {
            transition: 'none',
            padding: 'calc(var(--digby-paper-padding-y)/2) calc(var(--digby-paper-padding-x)/2)'
        }
    }

    return (
        <div {...props} className={clsx(classNames.customCheckbox)}>
            <Button {...defaultButtonProps} />
        </div>
    )
}

div[theme][mode] .customCheckbox > *, div[theme][mode] div.customCheckbox > div[active] {
    /*noinspection CssUnresolvedCustomProperty*/
    --digby-button-box-shadow: var(--digby-shadow-checkbox);
}

Multiple options

You can choose more than one

Option 1

Option 2

Option 3

Custom MenuItemComponent

div[theme][mode] .customMenuItemInputContainer {
    /*noinspection CssUnresolvedCustomProperty*/
    border-radius: calc(calc(20px * var(--digby-paper-border-radius-multiplier, 1)) + 2px);
    padding: calc(var(--digby-paper-padding-x)) calc(var(--digby-paper-padding-x));
    --digby-custom-menu-item-input-container-padding: var(--digby-paper-padding-x);
}

div[theme][mode] .customMenuItemInputContainer2 {
    /*noinspection CssUnresolvedCustomProperty*/
    --digby-custom-menu-item-input-container-padding: var(--digby-paper-padding-x);
}

.customMenuItem {
    display: block;
    width: 100%;
    padding: 2px;
    /*noinspection CssUnresolvedCustomProperty*/
    border-radius: calc(calc(20px * var(--digby-paper-border-radius-multiplier, 1)) + 2px);
    border-style: none;
    box-shadow: none;
    margin-bottom: calc(var(--digby-custom-menu-item-input-container-padding) / 2);
}

/*noinspection ALL*/
@container digby-container-root (max-width: 991px) {
    .customMenuItem {
        padding: 1px;
        border-radius: calc(calc(20px * var(--digby-paper-border-radius-multiplier, 1)) + 1px);
    }
}

.customMenuItem:last-child {
    margin-bottom: 0;
}

/*noinspection ALL*/
div[theme][mode] .customMenuItem > * {
    --digby-paper-border-radius: calc(20px * var(--digby-paper-border-radius-multiplier, 1));
    min-height: calc(80px * var(--digby-paper-padding-multiplier, 1));
}

div[theme][mode] .customMenuItem > *, div[theme][mode] .customMenuItem > div[active], div[theme][mode] .customMenuItem > div:hover {
    /*noinspection CssUnresolvedCustomProperty*/
    --digby-button-box-shadow: var(--digby-shadow-checkbox);
}

function CustomMenuItem(props) {

    const colorContext = useContext(ColorContext)

    const {
        active,
        color = colorContext.color,
        size,
        effect,
    } = props;

    const buttonRef = useRef();

    const [_active, setActive] = useState(active);

    useEffect(() => {
        if (active !== _active) {
            setActive(active)
        }
    }, [active])    

    useEffect(()=>{
        if (effect && buttonRef.current) {
            effect({
                ...buttonRef.current,
                actions: {
                    ...buttonRef.current.actions,
                    setActive: async (value)=>{
                        await setActive(value)
                    }
                }
            })
        }
        return ()=>{
            effect({
                ...buttonRef.current ? buttonRef.current : {},
                actions: {
                    ...buttonRef.current.actions ? buttonRef.current.actions : {},
                    setActive: ()=>{}
                }
            })
        }
    })

    return (
        <Button
            className={classNames.customMenuItem}
            color={'primary'}
            variant={'contained'}
            size={size}
            Component={'div'}
            style={{
                ..._active ? {} : {background: 'transparent'}
            }}
            ButtonBaseContentComponent={()=>{
                return (
                    <MenuItem
                        {...props}
                        disableElevation={false}
                        active={_active}
                        enableBackground={true}
                        color={color}
                        effect={(p)=>{
                            buttonRef.current = p;
                        }}
                    />
                )
            }}
        />
    )
}

Multiple options

Select one

Option 1Secondary text

Option 2Secondary text

Option 3Secondary text

Multiple options

Select one

Option 1Secondary text

Option 2Secondary text

Option 3Secondary text

Examples for Switch

Validation example for switches

function switchOne(value, changedEver) {
    const isError = (changedEver && !value.length);
    return {error: isError, errorMessage: isError ? 'Switch one' : ''}
}

Variants

Contained

Additional text

Option 1

Outlined

Additional text

Option 1

Text

Additional text

Option 1

Disabled

Contained

Additional text

Option 1

Outlined

Additional text

Option 1

Text

Additional text

Option 1

Sizes

Small

Additional text

Option 1

Default

Additional text

Option 1

Large

Additional text

Option 1

Custom styles

function primarySwitch({active, disabled, color}) {
    return {color: disabled ? 'disabled' : active ? 'primary' : color}
}

function primarySwitchCircle({active, disabled, color}) {
    return {
        color: disabled ? 'disabled' : active ? 'primary' : color,
        circle: true,
    }
}

function switchParentCircle({className}) {
    return {
        circle: true,
        className: clsx(className, classNames.switchParentCircle)
    }
}

div[theme][mode] .switchParentCircle {
    aspect-ratio: auto;
    border-radius: calc(((var(--digby-paper-padding-x)) * 2 + 1em) * 1.9);
}

Custom style

Additional text

Option 1

Custom style

Additional text

Option 1

A React based UI kit for DIGBY Design

Input

Props

Text

TextBase

Props

Select

SelectBase

Props

Checkbox

CheckboxBase

Props

Switch

SwitchBase

Props

Examples for Text

Examples for Select

Examples for Checkbox

Examples for Switch

ver: iyx6hb