@fayegram-ai/faye-ui/controls

Import

import { Button, IconButton, ButtonGroup } from '@fayegram-ai/faye-ui/controls';

Usage and behavior guide · API JSON

This entry has no declared client boundary; individual exported behavior still follows its rendering contract.

Public exports

Name	Kind	Resolved declaration type
`Button`	value	`(input: ButtonProps) => import("react").JSX.Element`
`IconButton`	value	`({ className, pendingPosition, ...props }: IconButtonProps) => import("react").JSX.Element`
`ButtonGroup`	value	`(input: ButtonGroupProps) => import("react").JSX.Element`
`ButtonVariantOverrides`	type	`ButtonVariantOverrides`
`ButtonToneOverrides`	type	`ButtonToneOverrides`
`ButtonSizeOverrides`	type	`ButtonSizeOverrides`
`ButtonTone`	type	`ButtonTone`
`ButtonSize`	type	`ButtonSize`
`ButtonVariant`	type	`ButtonVariant`
`ButtonProps`	type	`ButtonProps`
`IconButtonProps`	type	`IconButtonProps`
`ButtonGroupProps`	type	`ButtonGroupProps`
`Checkbox`	value	{ readonly Root: { (input: Omit<import("@base-ui/react").CheckboxRootProps, "ref"> & import("react").RefAttributes<HTMLElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"checkbox", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"checkbox", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Indicator: { (input: Omit<import("@base-ui/react").CheckboxIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"checkbox", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-var… (full type in API JSON)
`CheckboxGroup`	value	`{ (input: Omit<import("@base-ui/react").CheckboxGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: Readonly<Record<string, string>> \| undefined; }): import("react").ReactElement; displayName: string; }`
`Combobox`	value	{ readonly Root: typeof Base.Root; readonly List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>; readonly Collection: typeof Base.Collection; readonly Value: typeof Base.Value; readonly useFilter: typeof Base.useFilter; readonly Label: { (input: Omit<import("@base-ui/react").ComboboxLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: { readonly variant?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"combobox", "variant"> \| undefined; readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"combobox", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVa… (full type in API JSON)
`Field`	value	{ readonly Control: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldControlProps, "ref"> & import("react").RefAttributes<HTMLElement>>; readonly Validity: import("react").FC<import("@base-ui/react").FieldValidityProps>; readonly Root: { (input: Omit<import("@base-ui/react").FieldRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"field", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"field", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Label: { (input: Omit<import("@base-ui/react").FieldLabelProps, "ref"> & import("react").Ref… (full type in API JSON)
`FieldLayout`	value	`({ label, controlId, description, error, required, invalid, describedBy, children, ...props }: FieldLayoutProps) => import("react").JSX.Element`
`ControlLabel`	value	`({ label, description, controlId, describedBy, disabled, children, className, ...props }: ControlLabelProps) => import("react").JSX.Element`
`FieldControlAttributes`	type	`FieldControlAttributes`
`FieldLayoutProps`	type	`FieldLayoutProps`
`ControlLabelAttributes`	type	`ControlLabelAttributes`
`ControlLabelProps`	type	`ControlLabelProps`
`Fieldset`	value	{ readonly Root: { (input: Omit<import("@base-ui/react").FieldsetRootProps, "ref"> & import("react").RefAttributes<HTMLElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"fieldset", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"fieldset", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Legend: { (input: Omit<import("@base-ui/react").FieldsetLegendProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"fieldset", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants")… (full type in API JSON)
`Form`	value	`{ (input: Base.Props<Record<string, any>> & { ref?: React.Ref<HTMLFormElement> \| undefined; } & { variants?: Readonly<Record<string, string>> \| undefined; }): import("react").ReactElement; displayName: string; }`
`Input`	value	`(input: InputProps) => import("react").JSX.Element`
`Textarea`	value	`(input: TextareaProps) => import("react").JSX.Element`
`InputProps`	type	`InputProps`
`TextareaProps`	type	`TextareaProps`
`Link`	value	`({ subtle, className, target, rel, ...props }: LinkProps) => import("react").JSX.Element`
`LinkProps`	type	`LinkProps`
`NumberField`	value	{ readonly Root: typeof Root; readonly Group: { (input: Omit<import("@base-ui/react").NumberFieldGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"number-field", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"number-field", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Input: { (input: Omit<import("@base-ui/react").NumberFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"number-field", "size"> \| undefined; readonly tone?: impor… (full type in API JSON)
`Radio`	value	{ readonly Root: { (input: Base.Root.Props<unknown> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"radio", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"radio", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Indicator: { (input: Omit<import("@base-ui/react").RadioIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"radio", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"radio", "tone"> \| undefined; } \| undefined; }): import("react").R… (full type in API JSON)
`RadioGroup`	value	`{ (input: Base.Props<unknown> & { variants?: Readonly<Record<string, string>> \| undefined; }): import("react").ReactElement; displayName: string; }`
`SelectField`	value	`({ items, value, defaultValue, onValueChange, name, form, required, disabled, invalid, placeholder, nativeOnMobile, native, size, variant, tone, ref, ...props }: SelectFieldProps) => import("react").JSX.Element`
`Select`	value	{ readonly Root: typeof Base.Root; readonly List: { (input: Omit<import("@base-ui/react").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: { readonly variant?: VisualVariant<"select", "variant"> \| undefined; readonly size?: VisualVariant<"select", "size"> \| undefined; readonly tone?: VisualVariant<"select", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Trigger: { (input: Omit<import("@base-ui/react").SelectTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & { variants?: { readonly variant?: VisualVariant<"select", "variant"> \| undefined; readonly size?: VisualVariant<"select", "size"> \| undefined; readonly tone?: VisualVariant<"select", "tone"> \| undefined; } \| undefined; })… (full type in API JSON)
`SelectFieldItem`	type	`SelectFieldItem`
`SelectFieldProps`	type	`SelectFieldProps`
`SliderRootProps`	type	`SliderRootProps<Value>`
`SliderMark`	type	`SliderMark`
`DiscreteSliderProps`	type	`DiscreteSliderProps<Value>`
`Slider`	value	{ readonly Root: typeof Root; readonly DiscreteRoot: typeof DiscreteRoot; readonly Marks: { (input: HTMLAttributes<HTMLDivElement> & { marks: readonly SliderMark[]; } & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Control: { (input: Omit<import("@base-ui/react").SliderControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"slider", "size"> \| undefined; readonly tone?: import("@fayegram-ai/fa… (full type in API JSON)
`Switch`	value	{ readonly Root: { (input: Omit<import("@base-ui/react").SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"switch", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"switch", "tone"> \| undefined; } \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Thumb: { (input: Omit<import("@base-ui/react").SwitchThumbProps, "ref"> & import("react").RefAttributes<HTMLSpanElement> & { variants?: { readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"switch", "size"> \| undefined; readonly tone?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVari… (full type in API JSON)
`TextField`	value	`({ label, description, error, id, containerClassName, startAdornment, endAdornment, ...props }: TextFieldProps) => import("react").JSX.Element`
`TextFieldProps`	type	`TextFieldProps`
`TextareaField`	value	`({ label, description, error, containerClassName, autosize, minRows, maxRows, id, ...props }: TextareaFieldProps) => import("react").JSX.Element`
`TextareaFieldProps`	type	`TextareaFieldProps`
`Toggle`	value	`{ (input: Base.Props<string> & import("react").RefAttributes<HTMLButtonElement> & { variants?: Readonly<Record<string, string>> \| undefined; }): import("react").ReactElement; displayName: string; }`
`ToggleGroup`	value	`{ (input: Base.Props<string> & import("react").RefAttributes<HTMLDivElement> & { variants?: Readonly<Record<string, string>> \| undefined; }): import("react").ReactElement; displayName: string; }`
`NativeSelect`	value	`({ profile, size, variant, htmlSize, invalid, className, ...props }: NativeSelectProps) => import("react").JSX.Element`
`NativeSelectProps`	type	`NativeSelectProps`
`Chip`	value	`(input: ChipProps) => import("react").JSX.Element`
`ChipProps`	type	`ChipProps`
`Rating`	value	`(input: RatingProps) => import("react").JSX.Element`
`RatingProps`	type	`RatingProps`
`AutosizeTextarea`	value	`({ minRows, maxRows, ref, value, defaultValue, onChange, style, ...props }: AutosizeTextareaProps) => import("react").JSX.Element`
`AutosizeTextareaProps`	type	`AutosizeTextareaProps`
`Autocomplete`	value	{ readonly Root: typeof Base.Root; readonly List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>; readonly Collection: typeof Base.Collection; readonly Value: typeof Base.Value; readonly useFilter: typeof import("@base-ui/react/internals/filter").getFilter; readonly useFilteredItems: typeof Base.useFilteredItems; readonly Portal: typeof Portal; readonly Input: { (input: Omit<import("@base-ui/react").AutocompleteInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement> & { variants?: { readonly variant?: import("@fayegram-ai/faye-ui/contracts/visual-variants").VisualVariant<"autocomplete", "variant"> \| undefined; readonly size?: import("@fayegram-ai/faye-ui/contracts/visual-var… (full type in API JSON)
`OTPField`	value	{ readonly Root: { (input: Omit<import("@base-ui/react").OTPFieldRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: {} \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Input: { (input: Omit<import("@base-ui/react").OTPFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement> & { variants?: {} \| undefined; }): import("react").ReactElement; displayName: string; }; readonly Separator: { (input: Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & { variants?: {} \| undefined; }): import("react").ReactElement; displayName: string; }; }
`InputGroup`	value	`({ profile, className, frame, variant, invalid, disabled, readOnly, ...props }: InputGroupProps) => import("react").JSX.Element`
`InputAdornment`	value	`({ profile, position, className, ...props }: HTMLAttributes<HTMLSpanElement> & { position?: "start" \| "end"; profile?: ComponentProfile; }) => import("react").JSX.Element`
`InputGroupProps`	type	`InputGroupProps`

Defaults and customization

Defaults and native behavior are documented in the linked family guide. This reference does not infer a default from an optional property.

Use semantic tokens, public part hooks and customization sheets. Keep visual configuration separate from application state.

State, events and accessibility

For interactive controls, pair a controlled value/open prop with its corresponding change callback; default props initialize uncontrolled state. Keep application validation and submission policy explicit. Name controls with visible labels, name icon-only actions on the button, and preserve focus and dismissal behavior when replacing parts. Use native form names and submit/reset types where supported. See the usage guide for component-specific behavior and live examples.

Declaration authority

Generated from packages/faye-ui/dist/controls/index.d.ts after the semantic package build. Common native/React attributes are intentionally omitted from property tables. Generic overloads, discriminated unions and complete inherited attributes remain authoritative in installed TypeScript declarations. React DOM attributes and Base UI component contracts describe the inherited foundations.