#Input

import Input from "@poodle/ui/Input";

Input is a component allow the user to enter the data.

By default, the component will render as input. If set prop multiline to true the component will render as textarea.

#Simple

#Adornments

We can add prefix or suffix to the input

The component support adds SVG icon to prefix or suffix. Icon with rectangle size (ideal is 24) and with, height is 1em can work out the box.

You can use @poodle/icons or @material-ui/icons or any Icon set that support the same specs. The UI is in beta so the @poodle/icons are in the development.

import InputAdornment from "@poodle/ui/InputAdornment";
import ErrorIcon from "@poodle/icons/react/Error";

<Box maxWidth="600px">
    <Input
        startAdornment={
            <InputAdornment
                adornmentPosition="start"
                color="negative.base"
                isIcon={true}
            >
                <ErrorIcon />
            </InputAdornment>
        }
        inputProps={{
            "aria-label": "Simple label",
        }}
    />
</Box>;

#Theming

Please check theming component document here.

export type InputStyleKeys = "root" | "input"

export interface InputThemeConfig
  extends StandardThemeConfig<InputStyleKeys, InputProps> {}

#Props

#Local Props

Name	Type	Description
endAdornment	`React.ReactNode`	Add suffix to the input.
error	`boolean`	Change the component style to error style when set to true.
inputProps	`BoxProps`	Input props
multiline	`boolean`	Change input to textarea element.
startAdornment	`React.ReactNode`	Add prefix to the input.

#Full Props

export interface InputProps
    extends BoxProps,
        StandardComponentProps,
        LocalInputProps {}