SearchInput

Customise the size of the SearchInput via the size prop on Field.

{/* standard */}
<Field labelVisibility="hidden" size="standard">
   <SearchInput placeholder="Placeholder" />
</Field>

{/* large */}
<Field labelVisibility="hidden" size="large">
   <SearchInput placeholder="Placeholder" />
</Field>

Customise the appearance of the SearchInput via the variant prop.

{/* standard */}
<Field labelVisibility="hidden">
   <SearchInput placeholder="Placeholder" variant="standard" />
</Field>

{/* subtle */}
<Field labelVisibility="hidden">
   <SearchInput placeholder="Placeholder" variant="subtle" />
</Field>

To control a SearchInput provide a value, as well as an onChange function to set the new value whenever it is updated.

const [value, setValue] = React.useState('') 
const handleChange = (event) => setValue(event.target.value)

return (
    <Field>
      <SearchInput value={value} onChange={handleChange} />
    </Field>
    <Text>The current value is: {value}</Text>
);

Additionally, if you want a clear button provide an onClear function to clear the value.

const [value, setValue] = React.useState('')
const handleChange = (event) => setValue(event.target.value)
const handleClear = () => setValue('')
return (
    <Field>
      <SearchInput value={value} onChange={handleChange} onClear={handleClear} />
    </Field>
    <Text>The current value is: {value}</Text>
);

When using formData from a request object to populate form data, you can use an uncontrolled SearchInput component. In this case, you don't need to provide any state or update functions. If you're using a form library like react-hook-form that uses an imperative API to retrieve the value of a form control, we forward the ref to the underlying <input>element. Here's an example:

const ref = useRef(null);

return (
    <Field>
      <SearchInput ref={ref} placeholder="Placeholder" />
    </Field>
);

SearchInput

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

return (
	<>
		<Field labelVisibility="hidden" size="standard">
			<SearchInput
				className="bg-caution-secondary"
				classNames={{
					adornmentStart: 'bg-positive p-2',
					adornmentEnd: 'bg-critical w-4',
				}}
				placeholder="Placeholder"
			/>
			{/* adornmentStart is used to display the search icon, and adornmentEnd is used to clear the input, both are handled internally. */}
		</Field>
	</>
);