ebay-textbox

EbayTextbox

Demo

Storybook

Usage

yarn add @ebay/ui-core-react

Import JS

import { EbayTextbox } from '@ebay/ui-core-react/ebay-textbox'

Import following styles from SKIN

import "@ebay/skin/textbox";

// Add if you're using floating labels
import "@ebay/skin/floating-label";

or if using CSS/SCSS

import "@ebay/skin/textbox.css";

// Add if you're using floating labels
import "@ebay/skin/floating-label.css";

<EbayTextbox value="Search for anything" />

Props

Name	Type	Stateful	Required	Description
fluid	Boolean	No	No	Takes the full width of the container
multiline	Boolean	No	No	Renders a multi-line textbox if true
opaqueLabel	Boolean	No	No	Only works with floating label. If set, then background is obscured of the floating label. Used with textarea to prevent label overlap
invalid	Boolean	No	No	Indicates a field-level error with red border if true
type	String	No	No	Default: text, can be password if needed
value	String	No	No	Indicates the value of the input element, required for a controlled component.
defaultValue	String	No	No	Indicates the default input element value. Use when the component is not controlled.
inputSize	String	No	No	default (default), large
floatingLabel	String	No	No	Indicates that the input is a floating label type and renders it as a label

Callbacks

Name	Required	Description	Arguments
onChange	No	Triggered when focus leaves and value is changed.	(ChangeEvent, { value: string })
onInputChange	No	Triggered when the value of the input is changed.	(ChangeEvent, { value: string })
onFocus	No	Called when input gets focus	(FocusEvent, { value: string })
onBlur	No	Called when input loses focus	(FocusEvent, { value: string })
onKeyPress	No	Called on key press	(KeyboardEvent, { value: string })
onKeyUp	No	Called on key up	(KeyboardEvent, { value: string })
onKeyDown	No	Called on key down	(KeyboardEvent, { value: string })
onInvalid	No	Triggered when value is invalid	(ChangeEvent, { value: string })
onFloatingLabelInit	No	Triggered when floating label is initialized	()
onButtonClick	No	Triggers when clicking on postfix-icon-button. Requires buttonAriaLabel to be present in order to attach correctly	(MouseEvent, { value: string })

It supports all the events supported by an input element (e.g. onInput, onPaste)

EbayTextboxPrefixIcon

Name	Type	Required	Description
name	String	No	Name of the icon to show

EbayTextboxPostfixIcon

Name	Type	Required	Description
name	String	No	Name of the icon to show
buttonAriaLabel	String	No	Aria-label for postfix icon/button. Required in order to render postfix button

EbayTextboxPrefixIcon example

import { EbayTextbox, EbayTextboxPrefixIcon } from '@ebay/ui-core-react/ebay-textbox'

<EbayTextbox placeholder="email">
    <EbayTextboxPrefixIcon name="messages" />
</EbayTextbox>