Input container

Last updated: 2.0.0 (18/01/2024)

This is a foundational component and is not designed to be used by itself. Only use this if you intend to make your own inputs.

The Input container provides the wrapper styling around the Text, Text area, Number and Select inputs.

Usage

import { InputContainer } from "@valence-ui/core";

function MyComponent() { 

    return ( 
        <InputContainer 
            // For brevity, the suggested props
            // are not included.
        >
            // Your sub-component here.
            // It should have little to no styling,
            // as this is handled by the InputContainer.
        </InputContainer>
    )
}

Props

Extends GenericLayoutProps, MouseClickEvents, MouseEvents and PointerEvents.

Property	Type	Description
icon	ReactNode	An icon to display at the left side of this input.
button	ReactNode	A button to display to the right of this input.
size	ComponentSize	Sets the size class. Defaults to theme default.
radius	ComponentSize	Sets the radius size class. Defaults to theme default.
variant	FillVariant	Sets the styling variant. Defaults to theme default.
grow	boolean	Shorthand for flex-grow = 1.
disabled	boolean	Whether this input is disabled.
required	boolean	Whether this input is required.
loading	boolean	Whether this input is loading.
inputRef	any	A ref of the input component.
iconContainerStyle	CSSProperties	Optional styles for the icon container component.
requireIndicatorStyle	CSSProperties	Optional styles for the require indicator component.
buttonContainerStyle	CSSProperties	Optional styles for the button container component.