Text4 checks
FormUrl
Web address. Adds https:// when it is missing.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-urlNeeds the @fieldkit registry. Add it once
Usage
- 1
Add the field to your schema
schema.tsimport { z } from "zod"import { urlField } from "@/lib/field-schemas" export const schema = z.object({ website: urlField({ httpsOnly: true }),}) - 2
Render it inside a Form
The name prop matches the schema key.
example-form.tsximport { Form } from "@/components/form/form"import { FormUrl } from "@/components/form/form-url"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema" export function ExampleForm() { return ( <Form schema={schema} defaultValues={{ website: "" }} onSubmit={save} > <FieldGroup> <FormUrl name="website" /> <FormSubmit>Save</FormSubmit> </FieldGroup> </Form> )}
Checks
CheckOptionError message
Valid URL
defaultEnter a full web address, like https://example.comAdds https://
defaultNoneHTTPS only
httpsOnlyUse an https:// addressAllowed domains
domainsUse a link from github.comBest practices
- Accept addresses without the protocol
Try these values
Terminal
urlField({ httpsOnly: true })| Input | Result | Output |
|---|---|---|
"https://kijani.co.ke" | Valid | "https://kijani.co.ke" |
"http://kijani.co.ke" | Invalid | Use an https:// address |
"kijani.co.ke" | Invalid | Enter a full web address, like https://example.com |
"" | Invalid | Enter a full web address, like https://example.com |
API reference
FormUrl
PropDescription
...input propsReact.ComponentProps<"input">Any input prop except type, value and handlers.Field frame
PropDescription
namestringKey in the schema. Also picks the preset label and autocomplete.labelReact.ReactNodeOverrides the preset label. Pass null to hide it.descriptionReact.ReactNodeHint under the control.requiredbooleanOverrides the asterisk read from the schema.fieldPropsFormFieldPropsProps for the wrapping Field, such as className.