Field

Import

import { Field } from '@beanwei/astro-ui'

Usage of Field.Text

Preview

Email

We'll never share your email with anyone else.

Code

---
import { Field } from '@beanwei/astro-ui'
---

<Field.Text
  placeholder="Email"
  type="email"
  label="Email"
  description="We'll never share your email with anyone else."
/>

Start & End Content

Preview

Email

We'll never share your email with anyone else.

Code

---
import { Field } from '@beanwei/astro-ui'
import { Icon } from 'astro-icon/components'
---

<Field.Text placeholder="Email" type="email" label="Email" description="We'll never share your email with anyone else.">
  <Icon slot="prefix" name="lucide:at-sign" size={16} aria-hidden="true" />
  <Icon slot="suffix" name="lucide:mail" size={16} aria-hidden="true" />
</Field.Text>

Textarea

Preview

Description

Enter a concise description of your project.

Code

---
import { Field } from '@beanwei/astro-ui'
---

<Field.Text
  placeholder="Enter your description"
  type="textarea"
  label="Description"
  description="Enter a concise description of your project."
/>

Usage of Field.Number

Preview

Price

Enter value between 0 and 100.

Code

---
import { Field } from '@beanwei/astro-ui'
---

<Field.Number label="Price" placeholder="0.00" min="0" max="100" step="20" description="Enter value between 0 and 100." />

Usage of Field.Password

Preview

Password

Password

Code

---
import { Field } from '@beanwei/astro-ui'
---

<Field.Password label="Password" description="Password" />

Usage of Field.Checkbox

Preview

I agree to the terms of service

You can use this checkbox with a label and a description.

Code

---
import { Field } from '@beanwei/astro-ui'
---

<Field.Checkbox
  label="I agree to the terms of service"
  description="You can use this checkbox with a label and a description."
/>

Checkbox Card

Preview

I agree to the terms of service

You can use this checkbox with a label and a description.

I agree to the terms of service

You can use this checkbox with a label and a description.

Code

---
import { Field } from '@beanwei/astro-ui'
---

<Field.Checkbox
  label="I agree to the terms of service"
  description="You can use this checkbox with a label and a description."
  mode="card"
/>
<Field.Checkbox
  label="I agree to the terms of service"
  description="You can use this checkbox with a label and a description."
  mode="card"
  align="right"
/>

Usage of Field.Radio

Preview

I agree to the terms of service

You can use this radio with a label and a description.

Code

---
import { Field } from '@beanwei/astro-ui'
---

<Field.Radio
  label="I agree to the terms of service"
  description="You can use this radio with a label and a description."
/>

Radio Card

Preview

I agree to the terms of service

You can use this radio with a label and a description.

I agree to the terms of service

You can use this radio with a label and a description.

Code

---
import { Field } from '@beanwei/astro-ui'
---

<Field.Radio
  label="I agree to the terms of service"
  description="You can use this radio with a label and a description."
  mode="card"
/>
<Field.Radio
  label="I agree to the terms of service"
  description="You can use this radio with a label and a description."
  mode="card"
  align="right"
/>