Inputs

Default Input

An alert is a non-modal dialog that informs  users without blocking access to the page, allowing continued interaction.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

Default

Label

Placeholder text

Supplementary information

Populated

Label

Placeholder text

Supplementary information

Active

Label

Supplementary information

Active / User typing

Label

User typing

Supplementary information

Error

Label

User has entered text

Supplementary information

Disabled

Label

Supplementary information

React Native

<SafeAreaView style={{ flex: 1 }}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          justifyContent: 'center',
          alignItems: 'center',
          padding: 24,
        }}
      >
        <View style={{ width: '100%', maxWidth: 393 }}>
          <Label
            style={{
              fontFamily: 'Inter-SemiBold',
              paddingBottom: 8,
              paddingLeft: 2,
            }}
            nativeID='inputLabel'
            onPress={handleOnLabelPress}
          >
            Enter email
          </Label>
          <Input
            ref={inputRef}
            placeholder='Enter your email'
            value={value}
            onChangeText={onChangeText}
            onSubmitEditing={onSubmitEditing}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            aria-labelledby='inputLabel'
            aria-errormessage='inputError'
            style={{ fontFamily: 'Inter' }}
            className={cn(
              inputState === 'error' &&
                'border-sys-border-error border-2 bg-sys-fn-error text-sys-text-body placeholder:text-sys-error',
              inputState === 'active' &&
                'border-sys-border-6 border-2 bg-sys-surface-secondary-pressed text-sys-text-body placeholder:text-sys-text-secondary'
            )}
          />
          {err && <ErrorMessage msg={err} />}
          <View style={{ height: 80 }} />
        </View>
      </ScrollView>
    </SafeAreaView>

View on Expo Go

Expo Go is a sandbox that enables you to quickly experiment with building native Android and iOS apps. It's the fastest way to get started. Download any version of it below.

Download Expo Go

Assets Panel

Each component is listed in the assets panel for easy access. We keep components visible and avoid nesting them in too many subfolders. For complex components, their building blocks are located in the respective sub-components folder.

View further documentation.

Local Styles

Local styles in Figma are available when the Design System is enabled.To apply, Select any of these presets from the Figma Local styles panel.

View further documentation.

Colour modes

You can toggle between light and dark modes by selecting the ‘Mode’ dropdown in the Figma ‘Design’ panel to the right. To apply, select Light or Dark from the Mode dropdown selector.

Badge

Join our Community Forum

Any other questions? Get in touch