Input

Input is the text field. It renders a pill that contains the native <input> and optional elements before and after it.

import { Input } from '@beyul/sulmu-ui'

Source · Figma

Examples

Basic

import { Input } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 320 }}>
      <Input aria-label="Client name" placeholder="Placeholder" />
    </div>
  )
}

States

import { Input, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 320 }}>
      <Input placeholder="Placeholder" aria-label="Empty" />
      <Input defaultValue="Beyond Borders Agency" aria-label="Filled" />
      <Input invalid defaultValue="contact@" aria-label="Invalid" />
      <Input disabled defaultValue="Read only value" aria-label="Disabled" />
    </Stack>
  )
}

Sizes

import { Input, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 320 }}>
      <Input size="sm" placeholder="Small, 36px" aria-label="Small" />
      <Input placeholder="Medium, 40px" aria-label="Medium" />
      <Input size="lg" placeholder="Large, 48px" aria-label="Large" />
    </Stack>
  )
}

Left and right elements

leftElement and rightElement take an icon or short text.

$USD

import { CalendarIcon, Input, SearchNormalIcon, Stack } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Stack style={{ maxWidth: 320 }}>
      <Input aria-label="Search" placeholder="Search..." leftElement={<SearchNormalIcon />} />
      <Input aria-label="Date" placeholder="MM/DD/YYYY" rightElement={<CalendarIcon />} />
      <Input aria-label="Amount" placeholder="0.00" leftElement="$" rightElement="USD" />
    </Stack>
  )
}

Translucent

The translucent variant is the search field that sits on the page canvas, as in the Top Bar.

import { Input, SearchNormalIcon } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 320 }}>
      <Input
        variant="translucent"
        aria-label="Search"
        placeholder="Search..."
        rightElement={<SearchNormalIcon />}
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	md	sm 36px, md 40px, lg 48px. Default: md.
variant	"outline" | "translucent"	outline	outline (default) or translucent, for the search field on the page canvas.
invalid	boolean	-	Marks the value as wrong. Inside a Field this is set for you.
leftElement	ReactNode	-	Icon or short text before the value, e.g. <SearchNormalIcon />.
rightElement	ReactNode	-	Icon or short text after the value.
rootClassName	string	-	Class for the outer pill. className goes to the same element.

Input also accepts every native input attribute except size (value, onChange, placeholder, type, disabled, name and so on). They go to the <input> element, and so does the ref.

Accessibility and usage

• Wrap the input in a Field to give it a label. On its own it needs an aria-label.
• Inside a Field, the input takes its id, invalid, disabled and required from the Field.
• className and rootClassName both go to the outer pill, not to the <input>.