## FieldBase
**Kind**: global class
* Properties
* [FieldBase.appearance](#FieldBase.appearance) : string
* [FieldBase.isInvalid](#FieldBase.isInvalid) : boolean
* [FieldBase.isFocused](#FieldBase.isFocused) : boolean
* [FieldBase.isRequired](#FieldBase.isRequired) : boolean
* [FieldBase.isDisabled](#FieldBase.isDisabled) : boolean
* [FieldBase.isPaddingDisabled](#FieldBase.isPaddingDisabled) : boolean
* [FieldBase.isReadOnly](#FieldBase.isReadOnly) : boolean
* [FieldBase.isFitContainerWidthEnabled](#FieldBase.isFitContainerWidthEnabled) : boolean
* [FieldBase.onFocus](#FieldBase.onFocus) : function
* [FieldBase.onBlur](#FieldBase.onBlur) : function
* [FieldBase.children](#FieldBase.children) : ReactNode
* [FieldBase.label](#FieldBase.label) : string
* [FieldBase.isLabelHidden](#FieldBase.isLabelHidden) : boolean
* [FieldBase.onClick](#FieldBase.onClick) : function
* [FieldBase.isRequired](#FieldBase.isRequired) : boolean
### new FieldBase()
Create instances of the FieldBase.
**Example**
```js
```
### FieldBase.appearance : string
The appearance of the field.
Valid values for this property are: 'standard' (default), 'compact' and 'subtle'.
Compact will make the field have less padding and subtle will remove the background/border
until a user hovers over it.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: "standard"
**Example**
```js
```
### FieldBase.isInvalid : boolean
Whether or not a field should show a validation error.
This is shown to the user through a warning icon and an orange border.
A future release will allow a custom error message to be displayed.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**Example**
```js
```
### FieldBase.isFocused : boolean
Whether or not a field should show its focused styles by default.
By default, this component will automatically add and remove this prop if itself
or any child of it receives focus or blur events.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**HTML Example**
```js
```
### FieldBase.isRequired : boolean
Whether or not the field is required.
If set to true, an asterisk will be appended to the label text.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**Example**
```js
```
### FieldBase.isDisabled : boolean
Whether or not a field is disabled.
This is shown to the user through a disabled cursor icon when hovering over the field.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**Example**
```js
```
### FieldBase.isPaddingDisabled : boolean
Whether or not the field should have padding.
Disables the field's padding css property.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**Example**
```js
```
### FieldBase.isReadOnly : boolean
Whether or not the field is in read-only mode.
Disables the field's hover effect to indicate that it is not editable.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**Example**
```js
```
### FieldBase.isFitContainerWidthEnabled : boolean
Whether or not the field should fill the width of its container.
If enabled, the field will fit the width of its container even
when the field content is not that wide.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**Example**
```js
```
### FieldBase.onFocus : function
Callback that is called whenever the Content is focused
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: () => void
**Example**
```js
alert('content focused!')} />
```
### FieldBase.onBlur : function
Callback that is called whenever the Content is blured
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: () => void
**Example**
```js
alert('content blured!')} />
```
### FieldBase.children : ReactNode
The content that will be displayed within the field
**Kind**: static property of [FieldBase](#FieldBase)
**Example**
```js
Hi!
```
### FieldBase.label : string
The label to be rendered above the form field.
This prop is still required, even if the hideLabel prop is set as the label is also used to
make the field accessible for screen readers.
**Kind**: static property of [FieldBase](#FieldBase)
**Example**
```js
```
### FieldBase.isLabelHidden : boolean
Whether the field should show a label above it.
If set to true no label will be shown and no space will be reserved for it.
**Note**: You must still provide a label for the component regardless of this prop.
The label is also used to make the field accessible to screen readers.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**Example**
```js
```
### FieldBase.onClick : function
Callback that is called whenever the Label is clicked
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: () => void
**Example**
```js
alert('label click!')} />
```
### FieldBase.isRequired : boolean
Whether or not the field is required.
If set to true, an asterisk will be appended to the label text.
**Kind**: static property of [FieldBase](#FieldBase)
**Default**: false
**Example**
```js
```
## default : enum
FieldBase appearances values.
**Kind**: global enum
**Properties**
| Name | Type | Default |
| --- | --- | --- |
| standard | string | "standard" |
| compact | string | "compact" |
| none | string | "none" |
| subtle | string | "subtle" |
## Support and feedback
### We're here to help!
Let us know what you think of our components and docs, your feedback is really important for us.
### Community support
Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-field-base,ak-field-base@8.0.1).
Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).
### Create a support ticket
Are you in trouble? [Let us know](https://ecosystem.atlassian.net/browse/AK)!
---
_Source: https://npm.io/package/ak-field-base · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._