ak-field-base
v6.1.1FieldBase
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
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
- FieldBase.appearance :
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!
Metadata
- Apache-2.0
- Whatever
- Atlassian Pty Ltd
- released 12/11/2016