# @fayegram-ai/faye-ui/controls

Public exports and dependency-resolved component properties, with usage and rendering guidance.

## Import

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

[Usage and behavior guide](/docs/fields/) · [API JSON](/api/packages/controls/index.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](https://react.dev/reference/react-dom/components/common) and [Base UI component contracts](https://base-ui.com/react/overview/quick-start) describe the inherited foundations.