ChakraValueSelectorProps

Defined in: packages/chakra/src/ChakraValueSelector.tsx:10

Extends

• VersatileSelectorProps.ComponentPropsWithoutRef<typeof NativeSelectRoot>

Methods

handleOnChange()

handleOnChange(value: any): void

Defined in: packages/react-querybuilder/src/types/props.ts:123

Parameters

Parameter	Type
value	any

Returns

void

Inherited from

VersatileSelectorProps.handleOnChange

Properties

as?

optional as?: ElementType

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:14

Inherited from

ComponentPropsWithoutRef.as

---

asChild?

optional asChild?: boolean

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:15

Inherited from

ComponentPropsWithoutRef.asChild

---

className?

optional className?: string

Defined in: packages/react-querybuilder/src/types/props.ts:76

CSS classNames to be applied.

This is string and not Classname because the Rule and RuleGroup components run clsx() to produce the className that gets passed to each subcomponent.

Inherited from

ChakraActionProps.className

---

context?

optional context?: any

Defined in: packages/react-querybuilder/src/types/props.ts:97

Container for custom props that are passed to all components.

Inherited from

ChakraActionProps.context

---

css?

optional css?: SystemStyleObject | Omit<(SystemStyleObject | undefined)[], keyof any[]>

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:49

Inherited from

ComponentPropsWithoutRef.css

---

disabled?

optional disabled?: boolean

Defined in: packages/react-querybuilder/src/types/props.ts:92

Disables the control.

Inherited from

ChakraActionProps.disabled

---

field?

optional field?: string

Defined in: packages/react-querybuilder/src/types/props.ts:193

Inherited from

VersatileSelectorProps.field

---

fieldData?

optional fieldData?: {[key: string]: unknown; className?: Classname; comparator?: string | ((f: {[key: string]: unknown; className?: Classname; comparator?: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string...; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt...>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{[key: string]: unknown; className?: Classname | undefined; comparator?: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null | undefined; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<string>[] | (string | FlexibleOption<...>)[] | undefined; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (s...; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType) | undefined; values?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }

Defined in: packages/react-querybuilder/src/types/props.ts:194

Index Signature

[key: string]: unknown

className?

optional className?: Classname

comparator?

optional comparator?: string | ((f: {[key: string]: unknown; className?: Classname; comparator?: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string...; defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt...>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, operator: string) => boolean)

defaultOperator?

optional defaultOperator?: string

defaultValue?

optional defaultValue?: any

disabled?

optional disabled?: boolean

id?

optional id?: string

inputType?

optional inputType?: InputType | null

label

label: string

matchModes?

optional matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]

name

name: string

operators?

optional operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]

placeholder?

optional placeholder?: string

subproperties?

optional subproperties?: FlexibleOptionList<{[key: string]: unknown; className?: Classname | undefined; comparator?: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null | undefined; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<string>[] | (string | FlexibleOption<...>)[] | undefined; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (s...; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType) | undefined; values?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | undefined; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }>

Properties of items in the value.

validator?

optional validator?: RuleValidator

value

value: string

valueEditorType?

optional valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType)

values?

optional values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>

valueSources?

optional valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]])

Inherited from

VersatileSelectorProps.fieldData

---

htmlContent?

optional htmlContent?: string

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:22

Inherited from

ComponentPropsWithoutRef.htmlContent

---

htmlHeight?

optional htmlHeight?: string | number

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:20

Inherited from

ComponentPropsWithoutRef.htmlHeight

---

htmlSize?

optional htmlSize?: number

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:18

Inherited from

ComponentPropsWithoutRef.htmlSize

---

htmlTranslate?

optional htmlTranslate?: "yes" | "no"

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:21

Inherited from

ComponentPropsWithoutRef.htmlTranslate

---

htmlWidth?

optional htmlWidth?: string | number

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:19

Inherited from

ComponentPropsWithoutRef.htmlWidth

---

icon?

optional icon?: ReactNode

Defined in: packages/chakra/src/snippets/native-select.tsx:7

Inherited from

ComponentPropsWithoutRef.icon

---

invalid?

optional invalid?: boolean

Defined in: node_modules/@chakra-ui/react/dist/types/components/native-select/native-select.d.ts:4

Inherited from

ComponentPropsWithoutRef.invalid

---

level

level: number

Defined in: packages/react-querybuilder/src/types/props.ts:84

The level of the current group. Always equal to path.length.

Inherited from

ChakraActionProps.level

---

listsAsArrays?

optional listsAsArrays?: boolean

Defined in: packages/react-querybuilder/src/types/props.ts:144

Inherited from

VersatileSelectorProps.listsAsArrays

---

multiple?

optional multiple?: boolean

Defined in: packages/react-querybuilder/src/types/props.ts:143

Inherited from

VersatileSelectorProps.multiple

---

operator?

optional operator?: string

Defined in: packages/react-querybuilder/src/types/props.ts:165

Inherited from

VersatileSelectorProps.operator

---

options

options: (OptionGroup<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }>[] | { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }[]) & (OptionGroup<...>[] | ... 1 more ... | undefined) & ((FullOperator<string>[] | OptionGroup<FullOperator<string>>[]) & (FullCombinator[] | OptionGroup<FullCombinator>[])) | undefined

Defined in: packages/react-querybuilder/src/types/props.ts:132

Inherited from

VersatileSelectorProps.options

---

path

path: Path

Defined in: packages/react-querybuilder/src/types/props.ts:80

Path to this subcomponent's rule/group within the query.

Inherited from

ChakraActionProps.path

---

recipe?

optional recipe?: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/generated/recipes.gen.d.ts:1723

Inherited from

ComponentPropsWithoutRef.recipe

---

rule?

optional rule?: RuleType<string, string, any, string, Record<string, any>>

Defined in: packages/core/src/types/queryBuilder.ts:12

Inherited from

ChakraValueEditorProps.rule

---

ruleGroup?

optional ruleGroup?: RuleGroupTypeAny

Defined in: packages/react-querybuilder/src/types/props.ts:155

Inherited from

VersatileSelectorProps.ruleGroup

---

rules?

optional rules?: RuleOrGroupArray

Defined in: packages/react-querybuilder/src/types/props.ts:154

Inherited from

VersatileSelectorProps.rules

---

schema

schema: Schema<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }, string> & Schema<{[key: string]: unknown; className?: Classname; comparator?: string | ((f: { [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt..., operator: string) => boolean); defaultOperator?: string; defaultValue?: any; disabled?: boolean; id?: string; inputType?: InputType | null; label: string; matchModes?: boolean | MatchMode[] | FlexibleOption<MatchMode>[]; name: string; operators?: string[] | FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }> | FlexibleOption<string>[] | string | FlexibleOption<string>[]; placeholder?: string; subproperties?: FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; id?: string | undefined; operators?: string[] | FlexibleOptionList<{ [x: string]: unknown; label: string; disabled?: boolean | undefined; name: string; value: string; }> | FlexibleOption<...>[] | (string | FlexibleOpt...>; validator?: RuleValidator; value: string; valueEditorType?: ValueEditorType | ((operator: string) => ValueEditorType); values?: FlexibleOptionList<{[key: string]: unknown; disabled?: boolean; label: string; name: string; value: string; }>; valueSources?: ValueSources | [FlexibleOption, ...FlexibleOption[]] | ((operator: string) => ValueSources | [FlexibleOption, ...FlexibleOption[]]); }, string>

Defined in: packages/react-querybuilder/src/types/props.ts:109

All subcomponents receive the configuration schema as a prop.

Inherited from

VersatileSelectorProps.schema

---

size?

optional size?: ConditionalValue<"sm" | "md" | "lg" | "xl" | "xs" | undefined>

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/generated/recipes.gen.d.ts:903

Default

"md"

Inherited from

ComponentPropsWithoutRef.size

---

testID?

optional testID?: string

Defined in: packages/react-querybuilder/src/types/props.ts:105

Test ID for this component.

Inherited from

ChakraActionProps.testID

---

title?

optional title?: string

Defined in: packages/react-querybuilder/src/types/props.ts:88

The title/tooltip for this control.

Inherited from

ChakraActionProps.title

---

unstyled?

optional unstyled?: boolean

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/factory.types.d.ts:11

If true, the element will opt out of the theme styles.

Inherited from

ComponentPropsWithoutRef.unstyled

---

validation?

optional validation?: boolean | ValidationResult

Defined in: packages/react-querybuilder/src/types/props.ts:101

Validation result of the parent rule/group.

Inherited from

ChakraActionProps.validation

---

value?

optional value?: string

Defined in: packages/react-querybuilder/src/types/props.ts:121

Inherited from

VersatileSelectorProps.value

---

variant?

optional variant?: ConditionalValue<"outline" | "subtle" | "ghost" | "plain" | undefined>

Defined in: node_modules/@chakra-ui/react/dist/types/styled-system/generated/recipes.gen.d.ts:901

Default

"outline"

Inherited from

ComponentPropsWithoutRef.variant

---

caution

API documentation is generated from the latest commit on the main branch. It may be somewhat inconsistent with official releases of React Query Builder.