Go Main page
Go Main page

Web components

cover

components

Input Search

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style input search is INPUT_SEARCH_STYLES.

You can not change the name of the object of tokens.

The variant prop allows to modify different aspects of the component.

Variants

Variants can modify the styles for each inner state of the inputSearch. The inner states are the same as the InputState.

The tokens extends those associated to the input basic, InputBasicStateProps, and adds:

The listOptions prop allow to modify the styles for the options of the list for each variant.

  • listOptions?: { variant?: string; optionVariant?: string; hightlightedOptionVariant?: string; };
12345678910
const INPUT_SEARCH_STYLES = {
  [VARIANT]: {
    listOptions?: {
      variant?: string;
      optionVariant?: string;
      hightlightedOptionVariant?: string;
    };
    [STATE]: {
      inputVariant?: string;
      popoverVariant?: { [key in DeviceBreakpointsType]?: string };

Example

inputSearch theme object example:

12345678910
const INPUT_SEARCH_STYLES = {
  [VARIANT]: {
    listOptions?: {
      variant?: 'list-options-variant';
      optionVariant?: 'option-variant';
      hightlightedOptionVariant?: 'highlighted-option-variant';
    },
    [STATE]: {
      inputVariant: 'input-variant',
      label: {