<Docs title="Basic Fields" layout="fullscreen">
	<BasicForm action="">
		<FormRow grid="30-70">
			<FieldInput
				label="Zipcode"
				pattern="[0-9]{4}"
			/>
			<FieldInput
				label="City"
			/>
		</FormRow>

		<FormRow>
			<FieldInput
				label="Basic Text"
				hint="Only fill this out if you really want to"
			/>
		</FormRow>
		<FormRow>
			<FieldInput
				label="Basic Text Required"
				required
			/>
		</FormRow>

		<FormRow>
			<FieldFile
				label="Single File"
			/>
		</FormRow>

		<FormRow>
			<FieldFile
				label="Multiple Files"
				multiple
			/>
		</FormRow>

		<FormRow>
			<FieldDate
				label="Date"
				required
			/>
		</FormRow>

		<FormRow>
			<FieldTextarea
				label="Textarea"
			/>
		</FormRow>

		<FormRow>
			<FieldSelect
				label="Select"
				options={[{ label: "Product Inquiry" }, { label: "Complaint" }, { label: "Other" }]}
			/>
		</FormRow>

		<FormRow>
			<FieldRadios
				label="Radios"
				options={[{ label: "Mrs." }, { label: "Mr." }, { label: "Other" }]}
			/>
		</FormRow>

		<FormRow>
			<FieldRadios
				label="Radios required"
				options={[{ label: "Mrs." }, { label: "Mr." }, { label: "Other" }]}
				required
			/>
		</FormRow>

		<FormRow>
			<FieldCheckboxes
				label="Checkbox"
				options={[{ label: "Select me" }]}
				hint="What does this mean?"
				client:load
			>
				<p>
					Slot content
				</p>
			</FieldCheckboxes>
		</FormRow>

		<FormRow>
			<FieldCheckboxes
				label="Checkbox required"
				options={[{ label: "I have to be checked", required: true }]}
			/>
		</FormRow>

		<FormRow>
			<Button type="submit">
				Submit
			</Button>
		</FormRow>
	</BasicForm>
</Docs>