@antadesign/anta
    Preparing search index...

    Interface SelectOption<V>Unreviewed

    One option in a <Select>. Pass a bare string as shorthand for { value: s, label: s }. Carries an index signature so you can attach arbitrary fields (a ranAt date, a status, …) and read them back in renderOption; the built-in filter still matches on value/label/hint.

    Generic in the value type V (defaults to string): Select infers V from your options, so { value: 365 } round-trips as number through onValueChange.

    interface SelectOption<V extends OptionValue = string> {
        value: V;
        label?: string;
        hint?: string;
        icon?: keyof IconShapes;
        disabled?: boolean;
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        toneScope?: ToneScope;
        tooltip?: ReactNode;
        className?: string;
        style?: CSSProperties;
        [key: string]: unknown;
        [key: `data-${string}`]: unknown;
    }

    Type Parameters

    Hierarchy (View Summary)

    Indexable

    • [key: string]: unknown

      Additional application data. Read it in renderOption.

    • [key: `data-${string}`]: unknown

      Additional data attributes on the option's rendered row.

    Index
    value label? hint? icon? disabled? tone? toneScope? tooltip? className? style?
    value: V

    The option's value (V) — its identity, what value / defaultValue name, and what onValueChange reports. Unique across the whole options tree (selection is value-keyed and global across groups / submenus).

    label?: string

    Visible label. Defaults to value.

    hint?: string

    Secondary text under the label (the option row's hint).

    icon?: keyof IconShapes

    Leading icon (renders after the selection indicator, if any).

    disabled?: boolean

    Disable just this option.

    tone?:
        | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Tone for this option's row (label, icon, hint, selected tint, and the checkbox/radio indicator). A named tone or a custom CSS color.

    toneScope?: ToneScope

    Override where this option applies its tone. The Select scope is inherited when omitted.

    tooltip?: ReactNode

    Tooltip for this option's row — a string or any node. In a multiple select with selectAll, a row with no tooltip falls back to a default hint for the Alt/Option-click "select only this" accelerator; set tooltip to override that, or '' to suppress it.

    className?: string

    CSS class on the option's rendered row.

    style?: CSSProperties

    Inline styles on the option's rendered row.

    Settings
    Member Visibility

    On This Page
    Properties