Text field
An email field and a Subscribe button beside the message, as a floating card on a neutral fill.
Last updated
---
/**
* Text field: An email field and a Subscribe button beside the message, as a floating card on a neutral fill.
*
* @block banner
* @order 1
*/
import { Mail } from '@lucide/astro'
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'
/** @composable */
interface Props extends BannerContent {}
const {
heading = 'Stay up to date with the latest news',
description = 'New components, guides and releases, once a month.',
submitLabel = 'Subscribe',
closeLabel,
} = Astro.props
---
<Banner heading={plain(heading)} description={description ? plain(description) : undefined} closeLabel={closeLabel}>
<FeaturedIcon slot="icon" theme="outline" color="neutral" class="max-md:hidden"><Mail /></FeaturedIcon>
<form slot="actions" method="post" class="flex flex-col gap-3 sm:flex-row md:w-96">
<Input type="email" name="email" placeholder="Enter your email" aria-label="Email" autocomplete="email" required class="flex-1" />
<Button type="submit" variant="outline" color="neutral">{submitLabel}</Button>
</form>
</Banner>
Show codeHide code
---
/**
* Text field: An email field and a Subscribe button beside the message, as a floating card on a neutral fill.
*
* @block banner
* @order 1
*/
import { Mail } from '@lucide/astro'
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'
/** @composable */
interface Props extends BannerContent {}
const {
heading = 'Stay up to date with the latest news',
description = 'New components, guides and releases, once a month.',
submitLabel = 'Subscribe',
closeLabel,
} = Astro.props
---
<Banner heading={plain(heading)} description={description ? plain(description) : undefined} closeLabel={closeLabel}>
<FeaturedIcon slot="icon" theme="outline" color="neutral" class="max-md:hidden"><Mail /></FeaturedIcon>
<form slot="actions" method="post" class="flex flex-col gap-3 sm:flex-row md:w-96">
<Input type="email" name="email" placeholder="Enter your email" aria-label="Email" autocomplete="email" required class="flex-1" />
<Button type="submit" variant="outline" color="neutral">{submitLabel}</Button>
</form>
</Banner>Add
npx @ava-ui/apogee add banner/text-fieldEvery piece of copy is a prop, with the sample copy as its default. Pass yours, or null to hide a part; see copy is props.
This copies the block to src/components/apogee/blocks/banner/ with everything it uses: Banner, Button, FeaturedIcon, Input. Place it at the top of a page, or pass fixed to a floating banner to pin it to the bottom of the viewport. Use Copy code above to paste it instead.
Accessibility
- The banner is a region named by its message, so it shows up in a screen reader’s landmark list.
- The close button removes the banner; it needs JS, so it hides without it and the banner stays.
- The email field is named by
aria-label="Email"(the placeholder is not a label); the form submits without JS.