DropInput

grommet-controls

3.0.1

An Input control with an optional drop button with the specified 'dropContent' or widgets.

browse

docs

issues

import { DropInput } from 'grommet-controls';

Main

	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)

Commits

Date	Author	Commit Message
8/31/2020	atanasster	update stories titles and navigation
8/30/2020	atanasster	update versions for publish
8/30/2020	atanasster	update eslint and add component-controls
8/27/2019	atanasster	initial commit 2.x alpha

4 commits

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

Docs

DropInput

Main

Commits

Stories

A 11 Y Title

Disabled

Drop Content

Drop Icon

Widgets

Plain

Focus Indicator

Placeholder

Name