Create Project with an Auto Slug

ProNew

A create dialog where the URL name follows the project name until the person edits it by hand, is normalised (lowercase, dashes, no accents), and is checked for length and a reserved list. Use this when a name also becomes an address.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Creating something whose name also forms a URL, a handle or an identifier, where the generated version is usually right.

Do not use it when: When the identifier must never change after creation, say so next to the field and consider showing it read-only.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`create`	`({ name, slug }) => Promise<void>`	Create the project; throw to keep the dialog open.

slugify(text) and slugProblem(slug) are exported, and should be repeated on the server.

Accessibility

The hint under the URL field says whether it still follows the name; when there is a problem it becomes the error text and the field gets aria-invalid, linked with aria-describedby.
The slug is normalised as typed, so what the person sees is exactly what is saved.
The dialog follows Form Dialog's focus, Enter and discard-guard behaviour. The result is announced from a status line outside the dialog.

Testing

The pattern ships with a Testing Library test (create-project-dialog-slug.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Creating something whose name also forms a URL, a handle or an identifier, where the generated version is usually right.

Do not use it when: When the identifier must never change after creation, say so next to the field and consider showing it read-only.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`create`	`({ name, slug }) => Promise<void>`	Create the project; throw to keep the dialog open.

slugify(text) and slugProblem(slug) are exported, and should be repeated on the server.

Accessibility

The hint under the URL field says whether it still follows the name; when there is a problem it becomes the error text and the field gets aria-invalid, linked with aria-describedby.
The slug is normalised as typed, so what the person sees is exactly what is saved.
The dialog follows Form Dialog's focus, Enter and discard-guard behaviour. The result is announced from a status line outside the dialog.

Testing

The pattern ships with a Testing Library test (create-project-dialog-slug.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.