Deepyr Documentation

Label as an Input Container

https://

Label(
  [
    // Use the FormLabel component for the descriptive text part.
    FormLabel([text('https://')], tag: 'span'),
    // Use the style property for layout behavior like 'grow'.
    Input(placeholder: 'URL', style: [Flex.grow]),
  ],
  type: LabelContainerType.input,
  isBordered: true,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap2],
)

Label for input at the end

.com

Label(
  [
    Input(placeholder: 'domain name', style: [Flex.grow]),
    FormLabel([text('.com')], tag: 'span'),
  ],
  type: LabelContainerType.input,
  isBordered: true,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap2],
)

Label as a Select Container

Type

Label(
  [
    FormLabel([text('Type')], tag: 'span'),
    Select(
      [
        option([text('Personal')]),
        option([text('Business')]),
      ],
      style: [Flex.grow],
    ),
  ],
  type: LabelContainerType.select,
  isBordered: true,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap2],
)

Label for date input

Publish date

Label(
  [
    FormLabel([text('Publish date')], tag: 'span'),
    Input(type: 'date', style: [Flex.grow]),
  ],
  type: LabelContainerType.input,
  isBordered: true,
  style: [Layout.flex, Alignment.itemsCenter, Layout.gap2],
)

Floating Label

Your Email

Label(
  [
    // The floating label pattern uses a plain <span> without the 'label' class.
    span([text('Your Email')]),
    Input(
      type: 'email',
      placeholder: 'mail@site.com',
      style: [Input.md],
    ),
  ],
  type: LabelContainerType.input,
  isBordered: false,
  // Use the `style` property for modifiers and sizing.
  style: [Label.floating, Size.wFull, Size.maxWxs],
)