# Select.Trigger

Renders the native button that toggles the select listbox popover.

## Signatures

```ts
export declare function Trigger<const Options extends TriggerOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, TriggerProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
```



## Examples

```ts
import { RefSubject } from "@typed/fx";
import { html } from "@typed/template";
import { component } from "@typed/template";
import * as Select from "@typed/ui/Select";

export const DensityPicker = component(function* () {
  const state = yield* Select.makeState({ id: "density-options", value: "comfortable" });
  const collection = yield* Select.makeCollection();
  const label = RefSubject.map(state, ({ value }) =>
    value === "compact" ? "Density: compact" : "Density: comfortable",
  );
  return html`<div class="density-picker">
    ${Select.Trigger({ state, content: label })}
    ${Select.Content({
      state, collection,
      content: [
        Select.Option({
          state, collection, id: "density-comfortable", value: "comfortable",
          textValue: "Comfortable", content: "Comfortable",
        }),
        Select.Option({
          state, collection, id: "density-compact", value: "compact",
          textValue: "Compact", content: "Compact",
        }),
      ],
    })}
  </div>`;
});
```