Slugs

import Slug from 'frui/fields/Slug';

Copy

Props

Slugs accepts all props of a standard HTML Input element. See Moz for standard input attributes.

Name	Type	Required	Notes
error	string	No	Standard error input
onUpdate	Function	No	Update event handler
passRef	LegacyRef	No	Standard ref input
style	CSS Object	No	Standard CSS input
className	string	No	Standard class name input

Number fields display commas and can limit decimal length. The value for numbers removes commas.

<Slug value="I am a Title" />

Copy

onUpdate is like onChange except the value is passed instead of the change event.

<Slug defaultValue="I am a Title" onUpdate={value => alert(value)} />

Copy

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string	`foobar`

You can pass the error prop to highlight the input field red.

<Input error={string|true} defaultValue="I am not a Title" />

Copy