+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "Forms"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
+++
## Forms variable
### Forms variable
Signature
```typescript
Forms: {
RadioButtonGroup: typeof RadioButtonGroup;
getFormStyles: (theme: import("@grafana/data").GrafanaTheme, options: {
variant: import("..").ButtonVariant;
size: import("../../types/size").ComponentSize;
invalid: boolean;
}) => {
label: {
label: string;
labelContent: string;
description: string;
categories: string;
chevron: string;
};
legend: {
legend: string;
};
fieldValidationMessage: {
fieldValidationMessage: string;
fieldValidationMessageIcon: string;
};
button: {
button: string;
iconButton: string;
iconWrap: string;
};
input: {
wrapper: string;
inputWrapper: string;
input: string;
inputDisabled: string;
addon: string;
prefix: string;
suffix: string;
loadingIndicator: string;
};
switch: {
switch: string;
};
checkbox: {
label: string;
description: string;
wrapper: string;
input: string;
checkmark: string;
};
};
Label: import("react").FC;
Form: typeof Form;
Field: import("react").FC;
InputControl: | import("react").ComponentClass | import("react").ReactElement import("react").ReactElement | null) | (new (props: any) => import("react").Component)>, ControlProp extends import("react-hook-form").Control> = import("react-hook-form").Control>>({ name, rules, as: InnerComponent, onBlur, onChange, onChangeName, onBlurName, valueName, defaultValue, control, ...rest }: import("react-hook-form").Assign<{
name: string;
as: As;
rules?: Partial<{
required: string | boolean | {
value: boolean;
message: string;
};
min: string | number | {
value: string | number;
message: string;
};
max: string | number | {
value: string | number;
message: string;
};
maxLength: string | number | {
value: string | number;
message: string;
};
minLength: string | number | {
value: string | number;
message: string;
};
pattern: RegExp | {
value: RegExp;
message: string;
};
validate: import("react-hook-form").Validate | Record;
}> | undefined;
onChange?: import("react-hook-form").EventFunction | undefined;
onBlur?: import("react-hook-form").EventFunction | undefined;
mode?: "onChange" | "onBlur" | "onSubmit" | undefined;
onChangeName?: string | undefined;
onBlurName?: string | undefined;
valueName?: string | undefined;
defaultValue?: any;
control?: ControlProp | undefined;
}, import("react-hook-form").AsProps>) => import("react").ReactElement import("react").ReactElement | null) | (new (props: any) => import("react").Component)>;
Checkbox: import("react").ForwardRefExoticComponent & import("react").RefAttributes>;
Legend: import("react").FC;
}
```
Import
```typescript
import { Forms } from '@grafana/ui';
```