FieldBase

This component contains all the common behaviour and styles for fields

FieldBase provides an Atlassian Design Guidelines compatible implementation for:

• Labels: spacing, margins, accessibility.
• Fields: sizing, borders, colors, wrapping behaviour, hover/focus states.
• Validation: styles (built in validation coming soon!)

FieldBase's will work by themselves but are really meant to be extended into a full field component.

Try it out

Interact with a live demo of the FieldBase component.

Installation

npm install ak-field-base

Using the component

Import the component in your React app as follows:

import FieldBase from 'ak-field-base';
ReactDOM.render(<FieldBase />, container);

The typical use-case for an FieldBase is to create a new component.

Usually you will want some form of input for the extended component.

<FieldBase label="A slotted input">
  <input type="text" value="I am slotted in a field-base!" />
</FieldBase>

This way, the component will tell you when it wants to update its props, without actually changing them.

Classes

FieldBase

FieldBase

Kind: global class

• Properties

  • FieldBase.appearance : string
  • FieldBase.isInvalid : boolean
  • FieldBase.isFocused : boolean
  • FieldBase.isRequired : boolean
  • FieldBase.isDisabled : boolean
  • FieldBase.isPaddingDisabled : boolean
  • FieldBase.isReadOnly : boolean
  • FieldBase.isFitContainerWidthEnabled : boolean
  • FieldBase.onFocus : function
  • FieldBase.onBlur : function
  • FieldBase.children : ReactNode
  • FieldBase.label : string
  • FieldBase.isLabelHidden : boolean
  • FieldBase.onClick : function
  • FieldBase.isRequired : boolean

new FieldBase()

Create instances of the FieldBase.

Example

<FieldBase label="Email" />

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
Default: "standard"
Example

<FieldBase appearance="compact" />

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
Default: false
Example

<FieldBase isInvalid />

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
Default: false
HTML Example

<FieldBase isFocused />

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
Default: false
Example

<FieldBase label="First Name" isRequired" />

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
Default: false
Example

<FieldBase isDisabled />

FieldBase.isPaddingDisabled : boolean

Whether or not the field should have padding.

Disables the field's padding css property.

Kind: static property of FieldBase
Default: false
Example

<FieldBase isPaddingDisabled />

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
Default: false
Example

<FieldBase isReadOnly />

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
Default: false
Example

<FieldBase isFitContainerWidthEnabled />

FieldBase.onFocus : function

Callback that is called whenever the Content is focused

Kind: static property of FieldBase
Default: () => void
Example

<FieldBase onFocus={() => alert('content focused!')} />

FieldBase.onBlur : function

Callback that is called whenever the Content is blured

Kind: static property of FieldBase
Default: () => void
Example

<FieldBase onBlur={() => alert('content blured!')} />

FieldBase.children : ReactNode

The content that will be displayed within the field

Kind: static property of FieldBase
Example

<FieldBase><div>Hi!</div></FieldBase>

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
Example

<FieldBase label="Email" />

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
Default: false
Example

<FieldBase label="First Name" isLabelHidden />

FieldBase.onClick : function

Callback that is called whenever the Label is clicked

Kind: static property of FieldBase
Default: () => void
Example

<FieldBase onClick={() => 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
Default: false
Example

<FieldBase label="First Name" isRequired" />

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.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!