Subcomponents
Subcomponents are utilities used to create bespoke components.
Overview
Subcomponents are used internally by Nebula to create other components. They are exported as a utility to help create bespoke components.
Field
Field wraps inputs, handling the label, hint, and error states. Any additional props are passed to the child element (input). To make use of the characters and fullWidth functionality, inputs should be 100% width.
Properties
| Name | Values | Default |
|---|---|---|
id (required) | String | |
label (required) | String | |
optional | Boolean | false |
hint | ReactNode | |
error | ReactNode | |
characters | Number | 25 |
fullWidth | alwaysneversmall | small |
affixWidthAccount for an icon when calculating width based on characters | Number | 0 |
...Passed to the child element | JSX.IntrinsicElements["input"] |
Tokens
Inputs
Inputs are the underlying inputs used in our fields. The following are available:
- CurrencyInput
- EmailInput
- NumberInput
- TelInput
- TextInput
- PasswordInput
- SelectInput
- TextareaInput
Properties
The properties available may differ depending on the input used, but they are all built from the same base which supports the following properties.
| Name | Values | Default |
|---|---|---|
iconLeft | IconName | |
iconRight | IconName | |
... | JSX.IntrinsicElements["input"] |