Skip to content

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

NameValuesDefault

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.

NameValuesDefault

iconLeft

caret-downcaret-rightchevron-leftchevron-rightchevron-upchevron-downcrosscheckeuropoundnew-windowgaselectricitylinkdownloadplusminus

iconRight

caret-downcaret-rightchevron-leftchevron-rightchevron-upchevron-downcrosscheckeuropoundnew-windowgaselectricitylinkdownloadplusminus

...

JSX.IntrinsicElements["input"]

Tokens