created:4/21/2021
updated:4/21/2021
source lines:160
comments %:5
DropInput
grommet-controls
3.0.1An Input control with an optional drop button with the specified 'dropContent' or widgets.
Name | Description | Default | |
---|---|---|---|
IDropInputOwnProps (14 properties) | |||
a11yTitle | Custom title to be used by screen readers string | - | |
a11yDropTitle | Custom drop button title to be used by screen readers string | - | |
onChange | Function that will be called when the user enters a new value ((x: { target: HTMLInputElement; }) => void) & ((event: ChangeEvent<HTMLInputElement>) => void) | - | |
dropAlign | { top?: "bottom" | "top"; bottom?: "bottom" | "top"; right?: "left" | "right"; left?: "left" | "right"; } & { top?: "bottom" | "top"; bottom?: "bottom" | "top"; right?: "left" | "right"; left?: "left" | "right"; } | { top: 'bottom', right: 'left' } | |
dropTarget | Target where the drop will be aligned to. This should be a React reference. Typically, this is not required as the drop will be aligned to the DropButton itself by default object | - | |
dropContent | Content to put inside the Drop Element | - | |
dropIcon | Icon for drop content Element | <FormDown /> | |
widgets | Additional widgets to be placed next to the input { [x: string]: any; icon: Element; }[] | [] | |
onOpen | Callback for when the drop is opened (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void | - | |
onClose | Callback for when the drop is closed (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void | - | |
onKeyDown | Callback for when a key is pressed ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) & ((event: KeyboardEvent<HTMLInputElement>) => void) | - | |
onKeyUp | Callback for when a key is released ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) & ((event: KeyboardEvent<HTMLInputElement>) => void) | - | |
update | functio n to be called on update (fn: (value: string) => void) => void | - | |
defaultValue | default value for uncontrolled mode string | number | (string & readonly string[]) | (number & readonly string[]) | - | |
TextInputProps (19 properties) | |||
ClassAttributes (1 properties) | |||
Attributes (1 properties) | |||
InputHTMLAttributes (28 properties) | |||
HTMLAttributes (41 properties) | |||
AriaAttributes (48 properties) | |||
DOMAttributes (157 properties) |
package | imports | peer |
---|---|---|
grommet ^2.15.0 | KeyboardDropButtonButton | * |
grommet-icons/icons/FormDown ^2.15.0 | FormDown | * |
react ^17.0.1 | ReactComponent | * |
react-dom ^17.0.1 | findDOMNode | * |
styled-components ^5.1.1 | ThemeContext | * |
file | imports |
---|---|
"./DropInputProps" | IDropInputProps |
"./StyledDropInput" | StyledDropInputStyledDropInputContainerStyledWidgetsContainer |