Fieldset(
  [
    Legend([text('Page title')]),
    Input(placeholder: 'My awesome page'),
    FormLabel([
      text('You can edit page title later on from settings'),
    ]),
  ],
  style: [Size.wxs],
)

Fieldset(
  [
    Legend([text('Page title')]),
    Input(placeholder: 'My awesome page'),
    FormLabel([
      text('You can edit page title later on from settings'),
    ]),
  ],
  style: [
    Size.wxs,
    BgUtil.base200,
    Spacing.p(4),
    BorderUtil.border,
    BorderUtil.base300,
    Effects.roundedBox,
  ],
)

Fieldset(
  [
    Legend([text('Page details')]),
    // Using FormLabel with tag:'label' for semantic input labels.
    FormLabel([text('Title')], tag: 'label'),
    Input(placeholder: 'My awesome page'),

    FormLabel([text('Slug')], tag: 'label'),
    Input(placeholder: 'my-awesome-page'),

    FormLabel([text('Author')], tag: 'label'),
    Input(placeholder: 'Name'),
  ],
  style: [Size.wxs, BgUtil.base200, Spacing.p(4)],
  classes: 'border border-base-300 rounded-box',
)

Fieldset(
  [
    Legend([text('Settings')]),
    Join([
      Input(placeholder: 'Product name', classes: 'join-item'),
      Button([text('save')], classes: 'join-item'),
    ]),
  ],
  style: [Size.wxs, BgUtil.base200, Spacing.p(4)],
  classes: 'border border-base-300 rounded-box',
)

Fieldset(
  [
    Legend([text('Login')]),
    FormLabel([text('Email')], tag: 'label'),
    Input(type: 'email', placeholder: 'Email'),
    FormLabel([text('Password')], tag: 'label'),
    Input(type: 'password', placeholder: 'Password'),
    Button(
      [text('Login')],
      style: [Button.neutral, Spacing.mt(4)],
    ),
  ],
  style: [Size.wxs, BgUtil.base200, Spacing.p(4)],
  classes: 'border border-base-300 rounded-box',
)