Deepyr Documentation

Text input

Input(
  placeholder: 'Type here',
  style: [Input.bordered],
)

Text input with text label inside

Use the Label component as a styled container to add icons and other elements inside the input field.

search⌘K description PathOptional

Label(
  [
    Icon('search'),
    Input(type: 'search', placeholder: 'Search', style: [Flex.grow]),
    Kbd([text('⌘')], style: [Kbd.sm]),
    Kbd([text('K')], style: [Kbd.sm]),
  ],
  type: LabelContainerType.input,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap(2)],
),
Label(
  [
    Icon('description'),
    Input(placeholder: 'index.php', style: [Flex.grow]),
  ],
  type: LabelContainerType.input,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap(2)],
),
Label(
  [
    FormLabel([text('Path')], tag: 'span'),
    Input(placeholder: 'src/app/', style: [Flex.grow]),
    Badge([text('Optional')], style: [Badge.neutral, Badge.xs]),
  ],
  type: LabelContainerType.input,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap(2)],
)

Ghost style

Input(
  placeholder: 'Type here',
  style: [Input.ghost, Input.bordered],
)

With fieldset and legend

What is your name?

Optional

Fieldset(
  [
    Legend([text('What is your name?')]),
    Input(placeholder: 'Type here', style: [Input.bordered]),
    FormLabel([text('Optional')]),
  ],
  style: [Size.wxs],
)

Input colors

Input(placeholder: 'neutral', style: [Input.bordered, Input.neutral]),
Input(placeholder: 'Primary', style: [Input.bordered, Input.primary]),
Input(placeholder: 'Secondary', style: [Input.bordered, Input.secondary]),
Input(placeholder: 'Accent', style: [Input.bordered, Input.accent]),
Input(placeholder: 'Info', style: [Input.bordered, Input.info]),
Input(placeholder: 'Success', style: [Input.bordered, Input.success]),
Input(placeholder: 'Warning', style: [Input.bordered, Input.warning]),
Input(placeholder: 'Error', style: [Input.bordered, Input.error]),

Sizes

Input(placeholder: 'Xsmall', style: [Input.bordered, Input.xs]),
Input(placeholder: 'Small', style: [Input.bordered, Input.sm]),
Input(placeholder: 'Medium', style: [Input.bordered, Input.md]),
Input(placeholder: 'Large', style: [Input.bordered, Input.lg]),
Input(placeholder: 'Xlarge', style: [Input.bordered, Input.xl]),

Disabled

Input(
  placeholder: "You can't touch this",
  style: [Input.bordered],
  disabled: true,
)

Text input with data list suggestion

Input(
  placeholder: 'Which browser do you use',
  style: [Input.bordered],
  attributes: {'list': 'browsers'},
),
Datalist(
  id: 'browsers',
  [
    option([], value: 'Chrome'),
    option([], value: 'Firefox'),
    option([], value: 'Safari'),
    option([], value: 'Opera'),
    option([], value: 'Edge'),
  ],
)

Different Input Types

Input(type: 'date', style: [Input.bordered]),
Input(type: 'time', style: [Input.bordered]),
Input(type: 'datetime-local', style: [Input.bordered]),

Username input with icon and validator

person

Must be 3 to 30 characters
containing only letters, numbers or dash

Label(
  [
    Icon('person'),
    Input(
      placeholder: 'Username',
      required: true,
      pattern: r'[A-Za-z][A-Za-z0-9\-]*',
      minLength: 3,
      maxLength: 30,
      title: 'Only letters, numbers or dash',
    ),
  ],
  type: LabelContainerType.input,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap(2)],
),
ValidatorHint([
  text('Must be 3 to 30 characters'),
  br(),
  text('containing only letters, numbers or dash'),
])

Email input with icon, validator, and joined button

The smart `Join` component automatically styles its `deepyr` children.

mail

// The `Join` component handles adding the `join-item` class automatically.
Join([
  // This Container groups the Label and Hint and becomes a single join-item.
  Container([
    Label(
      [
        Icon('mail'),
        Input(
          type: 'email',
          placeholder: 'mail@site.com',
          required: true,
        ),
      ],
      type: LabelContainerType.input,
      style: [Layout.flex, Alignment.itemsCenter, Layout.gap(2)],
    ),
    ValidatorHint(
      [text('Enter valid email address')],
      style: [Layout.hidden], // Hide hint until invalid
    ),
  ]),
  // This Button becomes the second join-item.
  Button([text('Join')], style: [Button.neutral]),
])

Password input with icon and validator

key

Label(
  [
    Icon('key'),
    Input(
      type: 'password',
      placeholder: 'Password',
      required: true,
      minLength: 8,
      pattern: r'(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}',
      title: 'Must be more than 8 characters...',
    ),
  ],
  type: LabelContainerType.input,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap(2)],
),
ValidatorHint(
  [ /* Hint text with <br> */ ],
  style: [Layout.hidden],
)

Telephone number input with icon and validator

phone_iphone

Must be 10 digits

Label(
  [
    Icon('phone_iphone'),
    Input(
      type: 'tel',
      placeholder: 'Phone',
      required: true,
      pattern: r'[0-9]*',
      minLength: 10,
      maxLength: 10,
      title: 'Must be 10 digits',
      // 'tabular-nums' is a specific utility not yet in deepyr,
      // so 'classes' is the appropriate escape hatch.
      classes: 'tabular-nums',
    ),
  ],
  type: LabelContainerType.input,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap(2)],
),
ValidatorHint([text('Must be 10 digits')])

URL input with icon and validator

link

Must be valid URL

Label(
  [
    Icon('link'),
    Input(
      type: 'url',
      placeholder: 'https://',
      value: 'https://',
      required: true,
      pattern: r'^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$',
      title: 'Must be valid URL',
    ),
  ],
  type: LabelContainerType.input,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap(2)],
),
ValidatorHint([text('Must be valid URL')])