Slug input

Slug input allows user to enter a slug for a resource they're creating, for example a new workspace. It supports an optional prefix and validation states for asynchronous uniqueness checks.

#Example

Always pair an input with a form field label so the input is named for everyone, including screen reader users.

#Usage

#Prefix

Show a prefix before the input to hint where the slug would be used via prefix prop.

#Disabled

Input should be disabled, when it shouldn't be allowed to be interacted with.

#Read only

Compared to a disabled input, read only input is usually used for values that user might want to copy to clipboard.

#Validation

SlugInput supports three states of validation via validationState prop:

1. "validating" - Slug is being validated.
2. "valid" - Slug is valid.
3. "invalid" - Slug is invalid.

#Size

The size prop impacts font-size and height. Default is set to md.

To set the width, use the width prop instead.

#Guidelines

#When to use

• When users enter a URL-safe identifier for a resource they're creating, for example a new workspace.
• When the value needs validation feedback, for example an asynchronous uniqueness check.

#When not to use

• If the value is free-form text rather than a slug, use a text input instead.

#Content

• Use sentence case for placeholder text.
• End placeholder text with three dots.

#Props

Inherits margin props.

Name	Default	Description
isDisabled	—	booleanDetermines whether input is disabled and doesn't respond to any user interactions.
isReadOnly	—	booleanDetermines whether input can be interacted with, but value can't be changed.
isRequired	—	booleanIndicates that input is required to fill out.
prefix	—	stringPrefix to show before the value.
value	—	stringInput value.
validationState	—	"validating" | "invalid" | "valid"Validation state.
width	"xs"	"xs" | "sm" | "md" | "lg" | "auto" | "100%"Input width.
size	"md"	"sm" | "md" | "lg"Input size.