SortSelect

This topic describes the anatomy, API reference, and variations of the SortSelect primitive component.

Anatomy

RequestResponse

import { SortSelect } from '@sitecore-search/ui';

const MySortSelectComponent = () => (
  <SortSelect.Root>
        <SortSelect.Trigger>
          <SortSelect.SelectValue></SortSelect.SelectValue>
          <SortSelect.Icon></SortSelect.Icon>
        </SortSelect.Trigger>
        <SortSelect.Content>
          <SortSelect.Viewport>
            <SortSelect.Option value={option1}>
                <SortSelect.OptionText>{option1.label}</SortSelect.OptionText>
            </SortSelect.Option>
            <SortSelect.Option value={option2}>
                <SortSelect.OptionText>{option3.label}</SortSelect.OptionText>
            </SortSelect.Option>
          </SortSelect.Viewport>
        </SortSelect.Content>
      </SortSelect.Root>
);

Using the component

The following tabs describe use of the SortSelect primitive component.

Plain component

RequestResponse

() => {
  const [currentValue, setCurrentValue] = React.useState(undefined);

  return (
    <>
      <StyledP>
        <b>Select label:</b> {JSON.stringify(currentValue)}
      </StyledP>

      <SortSelect.Root onValueChange={(v) => setCurrentValue(v)}>
        <SortSelect.Trigger>
          <SortSelect.SelectValue></SortSelect.SelectValue>
          <SortSelect.Icon></SortSelect.Icon>
        </SortSelect.Trigger>
        <SortSelect.Content>
          <SortSelect.Viewport>
            {sortOptions.map((option) => (
              <SortSelect.Option value={option}>
                <SortSelect.OptionText>{option.label}</SortSelect.OptionText>
              </SortSelect.Option>
            ))}
          </SortSelect.Viewport>
        </SortSelect.Content>
      </SortSelect.Root>
    </>
  );
}

Styled variants

API reference

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

Components to which you can add it as a child.
Components you can add as its child.
Details of any properties you can set.

SortSelect.Root

The SortSelect.Root component contains all the parts of the sort select.

Name	Description
`children`	The children inner to the `SortSelect.Root` component
`value`	Value of the select.
`defaultValue`	Default value for the select.
`onValueChange`	A callback that fires when the select value changes.
`open`	Boolean. Default `false`. A flag to keep the select open
`defaultOpen`	Boolean. Default `false`. A flag to keep the select open
`onOpenChange`	A function that gets triggered when the open status changes.
`dir`	String. Default ltr. Orientation of the select. ltr or rtl.
`name`	Name of the select.

SortSelect.Trigger

The SortSelect.Trigger component is the button that triggers the select.

Parent: SortSelect.Root

Children: SortSelect.Icon and SortSelect.SelectValue

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Trigger` component

SortSelect.Icon

The AccordionFacets.Root component contains all the parts of an accordion.

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Icon` component

SortSelect.SelectValue

The AccordionFacets.Root component contains all the parts of an accordion.

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Icon` component
`placeholder`	The content that will be rendered inside the `Select.Value` when no value or defaultValue is set.

SortSelect.Content

The SortSelect.Content component pops out when the select is opened.

Parent: SortSelect.Root

Children: SortSelect.Viewport

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Icon` component
`onCloseAutoFocus`	Event handler called when focus moves to the trigger after closing. It can be prevented by calling `event.preventDefault`.
`onEscapeKeyDown`	Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
`onPointerDownOutside`	Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling `event.preventDefault`.

SortSelect.Viewport

The scrolling SortSelect.Viewport component contains all of the items.

Parent: SortSelect.Content

Children: SortSelect.Option

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Icon` component

SortSelect.OptionText

The SortSelect.OptionText component is textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.

Parent: SortSelect.Option

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`

Do you have some feedback for us?

If you have suggestions for improving this article,