The Search component is the standardized use of the Input component with type search.
Basic Usage
The onSearch prop is required and takes a function and fires when the user clicks or presses Enter when focus is on the search icon or the search input. It also fires if the user is focused on the input and presses Enter.
import React from 'react';import { Search } from 'react-magma-dom';export function Example() {function handleSearch(term) {alert(term);}return <Search onSearch={handleSearch} />;}
Label and Placeholder Text
The Search component supports three text string props: iconAriaLabel, labelText, and placeholder.
The iconAriaLabel refers to the aria-label of the search icon, which will be read by screen readers.
The labelText refers to the aria-label of the input itself, which will also be read by screen readers.
The placeholder refers to the placeholder attribute of the input, which will display when the input is empty.
The default value of all of these is Search.
import React from 'react';import { Search } from 'react-magma-dom';export function Example() {function handleSearch(term) {console.log(term);}return (<SearchiconAriaLabel="Submit Search"labelText="Search for Articles and Books"onSearch={handleSearch}placeholder="Search our Library"/>);}
Input Size
The inputSize prop can be used to control the input size. Options are medium and large, with medium being the default.
import React from 'react';import { Search, InputSize } from 'react-magma-dom';export function Example() {function handleSearch(term) {console.log(term);}return <Search inputSize={InputSize.large} onSearch={handleSearch} />;}
Inverse
Inverse is an optional boolean prop, that may be passed in when inputs are to be displayed on a dark background.
import React from 'react';import { Search, Card, CardBody } from 'react-magma-dom';export function Example() {function handleSearch(term) {console.log(term);}return (<Card isInverse><CardBody><SearchisInverseonSearch={term => {handleSearch(term);}}/></CardBody></Card>);}
Predictive Search
The isPredictive boolean prop justifies the search button on the left of the input and changes the button to an icon for use in predictive search interfaces.
import React from 'react';import { Search } from 'react-magma-dom';export function Example() {return <Search isPredictive isClearable />;}
Loading
The isLoading boolean prop will determine if a loading animation is shown. The loading animation will replace the search icon button.
import React from 'react';import { Search } from 'react-magma-dom';export function Example() {const [searchValue, setSearchValue] = React.useState('');const [isLoading, setIsLoading] = React.useState(false);function handleSearch(term) {setIsLoading(true);setTimeout(() => {setSearchValue(`Search value set to ${term}`);setIsLoading(false);}, 2500);}function handleChange(event) {setSearchValue(event.target.value);}return (<div><p><strong>Search Value: </strong>{' '}<span id="loadingChangedValue">{searchValue}</span></p><SearchlabelText="Test Value"isLoading={isLoading}value=""onChange={handleChange}onSearch={handleSearch}/></div>);}
Custom Styles
Custom styles can be passed into the Search component. The containerStyle prop will apply to the container; the inputStyle prop will apply to the input field.
Please use discretion when adding custom styles.
import React from 'react';import { Search } from 'react-magma-dom';export function Example() {function handleSearch(term) {console.log(term);}return (<SearchcontainerStyle={{border: '2px solid green',maxWidth: '300px',padding: '2px',}}inputStyle={{ border: '1px dashed purple', borderRadius: '0' }}onSearch={handleSearch}/>);}
Change Events
import React from 'react';import { Search } from 'react-magma-dom';export function Example() {const [message, setMessage] = React.useState('');function handleSearch(term) {console.log(term);}function handleChange(event) {setMessage(event.target.value);}return (<div><p><strong>Changed Value: </strong>{' '}<span id="customChangedValue">{message}</span></p><SearchlabelText="Test Value"value=""onChange={handleChange}onSearch={handleSearch}/></div>);}
Search Props
This component uses forwardRef. The ref is applied to the input element.
All of the standard input attributes can be provided as props and will be applied to the input element that gets rendered.
containerStyle
Description
Style properties for the component container element
Type
CSSProperties
Default
-
hasCharacterCounter
Description
Enables Character Counter by default. When set to false, the default HTML attribute of 'maxlength' will work. Note: This is a temporary prop and will be removed in future releases.
Type
boolean
Default
true
icon
Description
Icon to display within the component
Type
ReactElement
Default
-
iconAriaLabel
Description
Text for icon button aria-label
Type
string
Default
"Search"
iconPosition
Description
Position within the component for the icon to appear
Type
enum, one of:
InputIconPosition.left
InputIconPosition.right
InputIconPosition.top
Default
InputIconPosition.right
iconRef
Description
Reference to the icon element
Type
React.Ref
Default
-
inputLength
Description
Total number of characters in an input.
Type
number
Default
-
inputSize
Description
Relative size of the component
Type
enum, one of:
InputSize.large
InputSize.medium
Default
InputSize.medium
inputStyle
Description
Style properties for the input element
Type
CSSProperties
Default
-
inputWrapperStyle
Description
Style properties for input wrapper element. This is the outermost div.
Type
CSSProperties
Default
-
isClearable
Description
Clear contents of input by clicking a clear button
Type
boolean
Default
-
isInverse
Description
If true, the component will have inverse styling to better appear on a dark background
Type
boolean
Default
false
isLabelVisuallyHidden
Description
If true, label text will be hidden visually, but will still be read by assistive technology
Type
boolean
Default
false
isLoading
Description
If true, the component will show a loading animation instead of a search button
Type
boolean
Default
false
isPasswordInput
Description
Boolean for whether this is a Password Input or not
Type
boolean
Default
-
isPredictive
Description
For use in predictive search which moves the icon to the left
Type
boolean
Default
-
labelPosition
Description
Position within the component for the label to appear
Type
enum, one of:
LabelPosition.left
LabelPosition.top
Default
LabelPosition.top
labelText
Description
Text for input aria-label
Type
string
Default
"Search"
maxCount
Description
A number value which gives Character Counter the maximum length of allowable characters in an Input.
Type
number
Default
-
maxLength
Description
A number value which gives Character Counter the maximum length of allowable characters in an Input.
Type
number
Default
-
onClear
Description
Function to be called when the contents of input are cleared by clicking a clear button
Type
function
Default
-
onDateChange
Description
Action that will synchronize chosenDate with input value
Type
function
Default
-
onIconClick
Description
Action that will fire when icon is clicked
Type
function
Default
-
onIconKeyDown
Description
Action that will fire when icon receives keypress
Type
function
Default
-
onSearch
Description
Action that will fire when search icon button is clicked
Type
function
Default
-
type
Description
The type attribute of the form field
Type
enum, one of:
InputType.email
InputType.file
InputType.number
InputType.password
InputType.search
InputType.tel
InputType.text
InputType.url
Default
InputType.text
value
Description
Value of the input element
Type
string
Default
-
width
Description
String to determine width of input, must be suffixed with "px", "rem", or "%""
Type
string
Default
"auto"
On this page